vue3中多层级路由缓存失效问题

问题现象：

在项目中路由嵌套了超过两层后，使用keep-alive对路由进行页面的缓存，发现并不能生效。
使用的路由结构：

// 一级路由
      path: 'menu1',
      component: () => import('@/views/demos/nested/menu1/index'), // Parent router-view
      name: 'Menu1',
      meta: { title: 'Menu 1' },
      redirect: '/nested/menu1/menu1-1',
// 二级路由
      children: [
        {
          path: 'menu1-2',
          component: () => import('@/views/demos/nested/menu1/menu1-2'),
          name: 'Menu1-2',
          redirect: '/nested/menu1/menu1-2/menu1-2-1',
          meta: { title: 'Menu 1-2' },
        // 三级路由
          children: [
            {
              path: 'menu1-2-1',
              component: () => import('@/views/demos/nested/menu1/menu1-2/menu1-2-1'),
              name: 'Menu1-2-1',
              meta: { title: 'Menu 1-2-1' }
            },
            {
              path: 'menu1-2-2',
              component: () => import('@/views/demos/nested/menu1/menu1-2/menu1-2-2'),
              name: 'Menu1-2-2',
              meta: { title: 'Menu 1-2-2' }
            }
          ]
        },
        {
          path: 'menu1-3',
          component: () => import('@/views/demos/nested/menu1/menu1-3'),
          name: 'Menu1-3',
          meta: { title: 'Menu 1-3' }
        }
      ]
    },

问题原因：

三级及以上层级路由的界面无法缓存，据说是官方的原因，直接放三级路由是无法被keep-alive 执行生效。

解决方案

方案一：多级路由变成两级以下路由层级

router文件中使用单级路由，即所有路由都平铺，这样就只会存在一个router-view。
缺点：

1. router由树结构变成了扁平结构，不能一眼看出菜单的层级关系。
2. 菜单栏不能直接从route中获取，要自己另外写。
3. 面包屑不能直接从route.matched里面获取，要自己一层一层封装。
   建议参考这篇文章来进行多层级路由拍平的处理，将显示用的路由层级跟实际加载到router中的数据分开来： 解决基于 keep-alive 的多级路由缓存问题

方案二：增加字段判断父页面是否从详情页面返回，以决定是否需要刷新页面

在store.js中新增以下配置，默认不刷新，即需要缓存

export default new Vuex.Store({
  state: {
    // 是否要刷新页面-列表页面
    refreshOrderList: false,
  },
  mutations: {
    // 是否要刷新页面-列表页面
    setRefreshOrderList(state, payload) {
      state.refreshOrderList = payload;
    },
  },
});

列表页OrderList.vue新增以下配置：

1. 在离开页面时进行判断：如果目的路由是详情页，则不需要刷新页面；否则就需要刷新。
2. 页面被缓存，触发activated时重置页面，包括筛选条件等。

beforeRouteLeave(to, from, next) {
    if (to.name == "OrderDetail") {
      this.$store.commit("setRefreshOrderList", false);
    } else {
      this.$store.commit("setRefreshOrderList", true);
    }
    next();
},
activated() {
    // 刷新页面，重置数据
    if (this.$store.state.refreshOrderList) {
      this.pageSize = 10;
      this.toSearch();
    }
},
mounted() {
    this.setData();
},

方案三：使用插件keep-alive-vue3

使用插件：keep-alive-vue3

参考文章：

vue3中多层级路由缓存失效问题：
解决vue中keep-alive和router-view搭配使用时(多级路由)缓存失效问题
vue keep-alive 不生效和多级（三级以上）缓存失败
解决基于 keep-alive 的多级路由缓存问题