当前位置: 首页 > article >正文

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 的多级路由缓存问题


http://www.kler.cn/a/451030.html

相关文章:

  • 服务器压力测试怎么做
  • springboot/ssm私房菜定制上门服务系统Java代码编写web厨师上门做菜
  • 如何完全剔除对Eureka的依赖,报错Cannot execute request on any known server
  • C++ Learning string类的使用
  • Mono里运行C#脚本3—mono_jit_init
  • 【087】基于51单片机智能宠物喂食器【Proteus仿真+Keil程序+报告+原理图】
  • 单元测试(UT,C++版)经验总结(gtest+gmock)
  • GitHub 桌面版配置 |可视化界面进行上传到远程仓库 | gitLab 配置【把密码存在本地服务器】
  • <论文>通过解耦注意力来增强Bert
  • Python数据可视化案例——折线图
  • Django 模型字段类型详解
  • 新手SEO指南如何快速入门与提升网站排名
  • HDR视频技术之十:MPEG 及 VCEG 的 HDR 编码优化
  • Pika Labs技术浅析(三):数据分析
  • gitlab window如何设置ssh
  • Qt5HttpServer : Qt官方的HTTP服务器
  • Uniapp 手机基座调试App 打包成Apk文件,并上传到应用商店
  • 如何在谷歌浏览器中使用内置翻译功能
  • 数据结构与算法 - 归并排序 #递归版本 #非递归版本 #文件归并
  • C++23中std::aligned_storage被弃用的深度解析
  • 【C++11】可变模板参数
  • Log4j2漏洞
  • Linux 中 grep、sed、awk 命令
  • 某名校考研自命题C++程序设计——近10年真题汇总(下)
  • 了解Hadoop
  • 【PCIe 总线及设备入门学习专栏 1.1 -- PCIe 基础知识 lane和link介绍】