fix(plugin-layout): 打开相同path的链接会更新页签为新的 & 正确触发onActivated (#146)

* feat: script setup 支持 defineRouteMeta (#144)

* chore(release): publish

 - @fesjs/preset-built-in@2.1.4
 - @fesjs/fes@2.1.4

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

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

* fix: 优化

* chore(release): publish

 - @fesjs/plugin-layout@4.2.3

Co-authored-by: qlin <haizekuo@gmail.com>

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

@@ -21,9 +21,9 @@
                 </FDropdown>
             </template>
         </FTabs>
-        <Page :nameList="keepAlivePages" :pageKey="getPageKey" isAllKeepAlive />
+        <Page ref="pageRef" :pageKey="getPageKey" isAllKeepAlive />
     </template>
-    <Page v-else :nameList="keepAlivePages" />
+    <Page v-else />
 </template>
 <script>
 import { computed, unref, ref } from 'vue';
@@ -48,6 +48,9 @@ export default {
         multiTabs: Boolean,
     },
     setup() {
+        const pageRef = ref();
+        const route = useRoute();
+        const router = useRouter();
         const createPage = (_route) => {
             const title = _route.meta.title;
             return {
@@ -58,10 +61,7 @@ export default {
                 key: getKey(),
             };
         };
-        const keepAlivePages = ref([]);
 
-        const route = useRoute();
-        const router = useRouter();
         const pageList = ref([createPage(route)]);
         const actions = [
             {
@@ -77,11 +77,15 @@ 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;
         });
+
         // 还需要考虑参数
         const switchPage = async (path) => {
             const selectedPage = findPage(path);
@@ -108,12 +112,7 @@ export default {
             }
             list.splice(index, 1);
             pageList.value = list;
-            const _keepAlivePages = [...keepAlivePages.value];
-            const keepIndex = _keepAlivePages.indexOf(selectedPage.name);
-            if (keepIndex !== -1) {
-                _keepAlivePages.splice(keepIndex, 1);
-            }
-            keepAlivePages.value = _keepAlivePages;
+            pageRef.value.removeKeepAlive(selectedPage.name);
         };
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -124,7 +123,7 @@ export default {
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
             pageList.value = [selectedPage];
-            keepAlivePages.value = [selectedPage.name];
+            pageRef.value.removeAllAndSaveKeepAlive(selectedPage.name);
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
@@ -146,6 +145,7 @@ export default {
         };
 
         return {
+            pageRef,
             route,
             pageList,
             getPageKey,
@@ -154,7 +154,6 @@ export default {
             handlerMore,
             handleCloseTab,
             actions,
-            keepAlivePages,
         };
     },
 };

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

@@ -1,21 +1,16 @@
 <template>
     <router-view v-slot="{ Component, route }">
-        <keep-alive :include="currentNameList">
-            <component :is="getComponent(Component, route)" :key="pageKey(route)" />
+        <keep-alive :include="keepAlivePages">
+            <component :is="Component" :key="pageKey(route)" />
         </keep-alive>
     </router-view>
 </template>
 <script>
-import { defineComponent, ref, watch } from 'vue';
+import { useRouter, useRoute } from '@@/core/coreExports';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
     props: {
-        nameList: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
         pageKey: {
             type: Function,
             default: () => {},
@@ -25,39 +20,57 @@ export default defineComponent({
             default: false,
         },
     },
-    emits: ['update:nameList'],
-    setup(props, { emit }) {
-        const currentNameList = ref(props.nameList);
+    setup(props) {
+        const route = useRoute();
+        const router = useRouter();
 
-        watch(
-            () => props.nameList,
-            () => {
-                if (currentNameList.value !== props.nameList) {
-                    currentNameList.value = props.nameList;
-                }
-            },
-        );
-
-        const getComponent = (Component, route) => {
-            if (props.isAllKeepAlive || route.meta['keep-alive']) {
-                const name = route.meta?.name ?? route.name;
-                if (name) {
+        function changePageComName(_route) {
+            if (_route.meta['keep-alive'] || props.isAllKeepAlive) {
+                const matched = _route.matched;
+                const component = matched[matched.length - 1].components.default;
+                const name = _route.meta?.name ?? _route.name;
+                if (name && component) {
                     // 修改组件的 name
-                    Component.type.name = name;
                     // 缓存的关键是组件name在keep-alive的include列表
-                    if (!currentNameList.value.includes(name)) {
-                        currentNameList.value = [...currentNameList.value, name];
-                        emit('update:nameList', currentNameList.value);
-                    }
+                    component.name = name;
+                    return name;
                 }
             }
+        }
 
-            return Component;
+        function getInitAlivePage() {
+            const name = changePageComName(route);
+            return name ? [name] : [];
+        }
+
+        const keepAlivePages = ref(getInitAlivePage());
+
+        router.afterEach(() => {
+            // 此时route已变，但是页面还未加载
+            const name = changePageComName(route);
+            // 缓存的关键是组件name在keep-alive的include列表
+            if (!keepAlivePages.value.includes(name)) {
+                keepAlivePages.value = [...keepAlivePages.value, name];
+            }
+        });
+
+        const removeKeepAlive = (name) => {
+            const _keepAlivePages = [...keepAlivePages.value];
+            const keepIndex = _keepAlivePages.indexOf(name);
+            if (keepIndex !== -1) {
+                _keepAlivePages.splice(keepIndex, 1);
+            }
+            keepAlivePages.value = _keepAlivePages;
+        };
+
+        const removeAllAndSaveKeepAlive = (name) => {
+            keepAlivePages.value = [name];
         };
 
         return {
-            currentNameList,
-            getComponent,
+            keepAlivePages,
+            removeKeepAlive,
+            removeAllAndSaveKeepAlive,
         };
     },
 });

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

@@ -1,7 +1,5 @@
 <template>
-    <div :class="$style.red">
-        字体颜色
-    </div>
+    <div :class="$style.red">字体颜色</div>
 </template>
 <config>
 {
@@ -13,12 +11,12 @@
 export default {
     setup() {
         return {};
-    }
+    },
 };
 </script>
 
 <style module>
 .red {
-  color: red;
+    color: red;
 }
 </style>

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

@@ -5,8 +5,7 @@
 <config>
 {
     "name": "editor",
-    "title": "$editor",
-    "keep-alive": true
+    "title": "$editor"
 }
 </config>
 <script>

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

@@ -1,6 +1,7 @@
 <template>
     <div class="page">
         <h4>Vuex</h4>
+        <input />
         <div>
             <button @click="increment">click me：{{ doubleCount }}</button>
         </div>
@@ -16,11 +17,12 @@
 <config>
 {
     "name": "store",
-    "title": "$store"
+    "title": "$store",
+    "keep-alive": true
 }
 </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';
 
@@ -30,6 +32,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(() => store.getters[GETTER_TYPES.counter.doubleCount]),