详解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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
原生JS进行前后端同构
Apr 22 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
javascript实现商品图片放大镜
Nov 28 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
thinkPHP查询方式小结
2016/01/09 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
node.js的事件机制
2017/02/08 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
解决Django连接db遇到的问题
2019/08/29 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
在keras里实现自定义上采样层
2020/06/28 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
综合实践教学反思
2014/01/31 职场文书
招聘专员岗位职责
2014/03/07 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python