详解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 相关文章推荐
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
Vue组件化开发思考
Feb 02 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
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
php str_pad 函数使用详解
2009/01/13 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
如何写求职信
2014/05/24 职场文书
青年教师个人总结
2015/02/11 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python