optimize route catch

src/App.vue

@@ -10,16 +10,10 @@
       <router-view></router-view>
     </keep-alive> -->
 
-    <keep-alive>
-      <router-view v-if="$route.meta.keepAlive">
-        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
-      </router-view>
+    <keep-alive :include="catchRoutes">
+      <router-view :key="$route.fullPath" />
     </keep-alive>
 
-    <router-view v-if="!$route.meta.keepAlive">
-      <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
-    </router-view>
-
     <!-- <nav-bar v-show="!isShowtabbar"></nav-bar> -->
     <tab-bar v-show="isShowtabbar"></tab-bar>
   </div>
@@ -31,11 +25,11 @@ import TabBar from '@/components/TabBar'
 // import NavBar from '@/components/NavBar'
 
 import { platform } from '@/utils/dingtalk.js'
+import { mapState } from 'vuex'
 
 export default {
   components: {
     TabBar,
-    // NavBar
   },
   data() {
     return {
@@ -63,8 +57,10 @@ export default {
       tabbarActive: 0,
     };
   },
-
   computed: {
+    ...mapState('app', [
+      'catchRoutes'
+    ]),
     isShowtabbar() {
       const { path } = this.$route
       return this.allowPath.includes(path)

src/router/index.js

@@ -133,12 +133,6 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  // TODO: 如果去往的页面不属于applyfor就可以重新恢复他的 keep-alive
-  if (!to.path.includes('applyfor')) {
-    console.log('%c ==============执行 >>>', 'background: blue; color: #fff', routes[1]);
-    routes[1].meta.keepAlive = true
-  }
-  
   // console.log('>>>>> beforeEach >>>>>');
   // console.log('to', to);
   // console.log('form', from);

src/store/modules/app.js

@@ -1,16 +1,18 @@
 const state = {
-    tabbarIdx: 0,
-    catchRoutes: [],
+    tabbarIdx: 0, // useless...
+    catchRoutes: ["Applyfor"], // routers catch
 }
 
 const mutations = {
     SET_TABBAR (state, payload) {
         state.tabbarIdx = payload.tabbarIdx
-        // window.localStorage.setItem('tabbarIdx', poylad.tabbarIdx)
     },
 
     ROUTE_ADD (state, payload){
-        state.catchRoutes.push(payload.value)
+        // NOTE: 阻止路由名称重复添加
+        if (!state.catchRoutes.includes(payload.value)) {
+            state.catchRoutes.push(payload.value)
+        }
     },
     ROUTE_REMOVE (state, payload){
         state.catchRoutes = state.catchRoutes.filter(route => route !== payload.value)

src/views/applyfor/index.vue

@@ -83,24 +83,29 @@ import IndexType11 from './components/IndexType11.vue';
 import * as approveInfoApi from '@/api/approveinfo'
 import * as approveApi from '@/api/approve'
 
+import store from '@/store';
+
 export default {
+    // NOTE: 只有退出applyfor/xxx页面时才清除缓存
     beforeRouteEnter(to, from, next) {
-        // if (to.name === 'Applyfor') {
-        //     if (!to.meta.keepAlive) {
-        //         to.meta.keepAlive = true
-        //     }
-        // }
-        console.log(' beforeRouteEnter >>>', to.name, to.meta, from.name);
+        store.commit({
+            type: "app/ROUTE_ADD",
+            value: 'Applyfor'
+        })
         next()
     },
-    // NOTE: 只有退出applyfor/xxx页面时才清除缓存
     beforeRouteLeave(to, from, next) {
         if (!to.path.includes('applyfor')) {
-            from.meta.keepAlive = false
+            store.commit({
+                type: 'app/ROUTE_REMOVE',
+                value: 'Applyfor'
+            })
         } else {
-            from.meta.keepAlive = true
+            store.commit({
+                type: "app/ROUTE_ADD",
+                value: 'Applyfor'
+            })
         }
-        console.log('%c beforeRouteLeave >>>', 'background: blue; color: #fff', to, from);
         next()
     },
     name: 'Applyfor',