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

最新推荐文章于 2025-03-27 09:07:01 发布

liuccn

最新推荐文章于 2025-03-27 09:07:01 发布

阅读量749

点赞数 4

分类专栏：前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lc_2014c/article/details/144696600

版权

前端开发专栏收录该内容

19 篇文章

订阅专栏

问题现象：

在项目中路由嵌套了超过两层后，使用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。
缺点：

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

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

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

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

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

在离开页面时进行判断：如果目的路由是详情页，则不需要刷新页面；否则就需要刷新。
页面被缓存，触发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();
},