feat: ✨ 优化合并的代码 完成刷新单页面功能

src/layout/header-aside/components/tabs/index.vue

@@ -27,9 +27,6 @@
       </div>
     </div>
     <div class="d2-multiple-page-control-btn" flex-box="0">
-      <el-button  @click="handleRefresh">
-        <d2-icon name="refresh"/>
-      </el-button>
       <el-dropdown
         size="default"
         split-button
@@ -77,6 +74,7 @@ export default {
         { icon: 'times-circle', title: '关闭全部', value: 'all' }
       ],
       contextmenuList: [
+        { icon: 'refresh', title: '刷新', value: 'refresh' },
         { icon: 'arrow-left', title: '关闭左侧', value: 'left' },
         { icon: 'arrow-right', title: '关闭右侧', value: 'right' },
         { icon: 'times', title: '关闭其它', value: 'other' },
@@ -100,14 +98,6 @@ export default {
       'closeAll',
       'openedSort'
     ]),
-    /**
-     * @description 仅刷新当前router组件 不影响其他已缓存的组件
-     */
-    handleRefresh () {
-      this.$router.push({
-        name: 'refresh'
-      })
-    },
     /**
      * @description 计算某个标签页是否可关闭
      * @param {Object} page 其中一个标签页
@@ -153,6 +143,7 @@ export default {
       if (tagName) this.contextmenuFlag = false
       const params = { pageSelect: tagName }
       switch (command) {
+        case 'refresh': this.$router.push({ name: 'refresh' }); break
         case 'left': this.closeLeft(params); break
         case 'right': this.closeRight(params); break
         case 'other': this.closeOther(params); break

src/layout/header-aside/layout.vue

@@ -63,7 +63,7 @@
               <div class="d2-theme-container-main-body" flex-box="1">
                 <transition :name="transitionActive ? 'fade-transverse' : ''">
                   <keep-alive :include="keepAlive">
-                    <router-view :key="$route.path + $route.meta[$route.path]" />
+                    <router-view :key="routerViewKey" />
                   </keep-alive>
                 </transition>
               </div>
@@ -126,6 +126,15 @@ export default {
     ...mapGetters('d2admin', {
       themeActiveSetting: 'theme/activeSetting'
     }),
+    /**
+     * @description 用来实现带参路由的缓存
+     */
+    routerViewKey () {
+      // 默认情况下 key 类似 __transition-n-/foo
+      // 这里的字符串操作是为了最终 key 的格式和原来相同 类似 __transition-n-__stamp-time-/foo
+      const stamp = this.$route.meta[`__stamp-${this.$route.path}`] || ''
+      return `${stamp ? `__stamp-${stamp}-` : ''}${this.$route.path}`
+    },
     /**
      * @description 最外层容器的背景图片样式
      */

src/views/system/function/refresh/index.js

@@ -1,6 +1,6 @@
 export default {
   beforeRouteEnter (to, from, next) {
-    from.meta[from.path] = Date.now()
+    from.meta[`__stamp-${from.path}`] = Date.now()
     next(instance => instance.$router.replace({ path: from.fullPath, meta: from.meta }))
   },
   render: h => h()