fix: 打开相同path的链接会更新route & 第一次打开会触发onActivated (#145)

* fix: 打开相同path的链接会更新route & 第一次打开会触发onActivated

* fix: 优化

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -32,16 +32,13 @@
         </FTabs>
         <router-view v-slot="{ Component, route }">
             <keep-alive :include="keepAlivePages">
-                <component
+                <component :is="Component" :key="getPageKey(route)" />
-                    :is="getComponent(Component, route, true)"
-                    :key="getPageKey(route)"
-                />
             </keep-alive>
         </router-view>
     </template>
-    <router-view v-else v-slot="{ Component, route }">
+    <router-view v-else v-slot="{ Component }">
         <keep-alive :include="keepAlivePages">
-            <component :is="getComponent(Component, route)" />
+            <component :is="Component" />
         </keep-alive>
     </router-view>
 </template>
@@ -65,7 +62,10 @@ export default {
     props: {
         multiTabs: Boolean
     },
-    setup() {
+    setup(props) {
+        const route = useRoute();
+        const router = useRouter();
+
         const createPage = (_route) => {
             const title = _route.meta.title;
             return {
@@ -76,11 +76,28 @@ export default {
                 key: getKey()
             };
         };
-        const keepAlivePages = ref([]);
 
-        const route = useRoute();
+        function changePageComName(_route) {
-        const router = useRouter();
+            if (_route.meta['keep-alive'] || props.multiTabs) {
+                const matched = _route.matched;
+                const component = matched[matched.length - 1].components.default;
+                const name = _route.meta?.name ?? _route.name;
+                if (name && component) {
+                    // 修改组件的 name
+                    // 缓存的关键是组件name在keep-alive的include列表
+                    component.name = name;
+                    return name;
+                }
+            }
+        }
+
+        function getInitAlivePage() {
+            const name = changePageComName(route);
+            return name ? [name] : [];
+        }
+
         const pageList = ref([createPage(route)]);
+        const keepAlivePages = ref(getInitAlivePage());
         const actions = [
             {
                 value: 'closeOtherPage',
@@ -95,11 +112,24 @@ export default {
         const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
 
         router.beforeEach((to) => {
-            if (!findPage(to.path)) {
+            const page = findPage(to.path);
+            if (!page) {
                 pageList.value = [...pageList.value, createPage(to)];
+            } else {
+                page.route = to;
             }
             return true;
         });
+
+        router.afterEach(() => {
+            // 此时route已变，但是页面还未加载
+            const name = changePageComName(route);
+            // 缓存的关键是组件name在keep-alive的include列表
+            if (!keepAlivePages.value.includes(name)) {
+                keepAlivePages.value = [...keepAlivePages.value, name];
+            }
+        });
+
         // 还需要考虑参数
         const switchPage = async (path) => {
             const selectedPage = findPage(path);
@@ -163,21 +193,6 @@ export default {
             }
         };
 
-        const getComponent = (Component, _route, isKeep = false) => {
-            if (isKeep || _route.meta['keep-alive']) {
-                const name = _route.meta?.name ?? _route.name;
-                if (name) {
-                    // 修改组件的 name
-                    Component.type.name = name;
-                    // 缓存的关键是组件name在keep-alive的include列表
-                    if (!keepAlivePages.value.includes(name)) {
-                        keepAlivePages.value = [...keepAlivePages.value, name];
-                    }
-                }
-            }
-
-            return Component;
-        };
         return {
             route,
             pageList,
@@ -187,7 +202,6 @@ export default {
             handlerMore,
             handleCloseTab,
             actions,
-            getComponent,
             keepAlivePages
         };
     }

packages/fes-template/.fes.js

@@ -36,7 +36,7 @@ export default {
     layout: {
         title: 'Fes.js',
         footer: 'Created by MumbleFE',
-        multiTabs: false,
+        multiTabs: true,
         navigation: 'side',
         theme: 'dark',
         menus: [

packages/fes-template/src/pages/store.vue

@@ -22,7 +22,9 @@
 }
 </config>
 <script>
-import { computed, ref } from 'vue';
+import {
+    computed, ref, onMounted, onUnmounted, onActivated, onDeactivated
+} from 'vue';
 import { useStore } from 'vuex';
 import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';
 
@@ -32,6 +34,23 @@ export default {
         const store = useStore();
         console.log('store==>', store);
         const disabled = ref(false);
+
+        onMounted(() => {
+            console.log('onMounted');
+        });
+
+        onUnmounted(() => {
+            console.log('onUnmounted');
+        });
+
+        onActivated(() => {
+            console.log('onActivated');
+        });
+
+        onDeactivated(() => {
+            console.log('onDeactivated');
+        });
+
         return {
             address: computed(() => store.getters[GETTER_TYPES.user.address]),
             doubleCount: computed(