详解vue-template-admin三级路由无法缓存的解决方案


Posted in Javascript onMarch 10, 2020

1. 为什么三级会缓存不了

在src/layout/AppMain组件:

详解vue-template-admin三级路由无法缓存的解决方案

keep-alive的组件依赖cachedViews,cachedViews是store中的一个状态,cachedViews的逻辑在src/layout/TagView

详解vue-template-admin三级路由无法缓存的解决方案

当路由变更时就会调用addViewTags,addViewTag会根据匹配的路由name属性进行缓存。而用到三级路由的时候,拿到name只能时第三级路由的name,二级路由组件的名字会丢失,keep-alive就不会进行缓存。
知道原因之后,第一个想法就是把二级路由的name也加上去就好了。要实现这个也很简单,只需要获取到matched属性就可以拿到匹配到的路由组件,把它加入到cachedViews数组就好了。但是有个问题就是,假设这里有个二级路由1-1,三级路由1-1-1,1-1-2,当要关掉1-1-1组件时,你到底要不要把1-1给删了,如果删了,缓存能顺利失效,但是如果你之前是打开了1-1-2,缓存的路由就会失效,因为它是依赖1-1的。如果不删的话,在侧边栏打开1-1-1的链接的时候,它又会重新复用回原本的组件。

2 把三级(概念上的)转化为二级(真实)

在这里想来,如果1-1-1,1-1-2,其实只是因为分在同类别里,两者如果没有实际共享的数据,那可以考虑把1-1的路由组件关掉,在我实践的项目就是如此,1-1-1和1-1-2只是同属在二级菜单下,并没有共享数据。但是生成菜单的时候是用router表的,那么生成菜单的用原本的,生成路由的时候用替换的。

下面是demo代码:

将要被替换的路由加上noCompoent属性。

function delteFakeParent(router,prefix) {
 var newRouter = { ...router }
 if(prefix){
 newRouter.path = prefix + '/' + router.path
 }
 if (!router.children) return newRouter
 var children = []
 if (router.noCompoent) {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i], newRouter.path)
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }else{
  children.push(item)
  }
 }
 newRouter = children
 } else {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i])
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }
 }
 newRouter.children = children
 }
 
 return newRouter
}

var backendManageRouter1 = {
 name: 'BackendManage',
 meta: {
 title: '后台管理',
 icon: 'index-management'
 },
 children: [{
 path: 'user-manage',
 name: 'UserManage',
 noCompoent: true,
 meta: {
  title: '用户管理',
  icon: 'rule-definition'
 },
 alwaysShow: true,
 children: [{
  path: 'user',
  name: 'User',
  meta: {
  title: '用户管理',
  icon: 'quality-control'
  },
  noCompoent: true,
  children: [
  {
   path: 'a',
   name: 'ad',
   meta: {
   title: 'ad管理',
   icon: 'quality-control'
   },
  }
  ]
 }, {
  path: 'role',
  name: 'Role',
  meta: {
  title: '角色管理',
  icon: 'rule-task-monitor'
  }
 }]
 }]
}

delteFakeParent这个函数做的就是创建一个router副本,遍历它的children,当这个路由被标记为noCompoent: true,就把它替换成它的children,回溯的过程中如果router是一个数组就代表这个router是被替换过,那么就遍历它,把它每一项放到router.children里面,这样就可以做到跟它其他children平级。
修改了这个之后要记着把真实router和菜单router同时暴露出去,菜单的项目是读取store中的permission.js的routers,那么这里set-router一方面要处理真是router和菜单router,需要增加一个state

3. 使用vuex存储数据

上面那个方案也只是针对二级路由组件不需要显示出来,那么可以放到一级路由的children里面,但是如果是有需要的话,还是使用vuex来存储数据比较好。

到此这篇关于vue-template-admin三级路由无法缓存的解决方案的文章就介绍到这了,更多相关vue-template-admin三级路由缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
You might like
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
linux面试题参考答案(6)
2016/06/23 面试题
2014年“世界无车日”活动方案
2014/09/21 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs