keep-alive不能缓存多层级路由菜单问题解决


Posted in Javascript onMarch 10, 2020

这出现的原因是多级路由导致的,就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级,二级的路由菜单,3级以上菜单并不能做到缓存,这里提供一个解决方案:

在cachedViews中手动加上一级菜单和三级菜单之间,缺失的二级菜单的名字,这样二级菜单下的组件就会缓存了

实列代码如下:

keep-alive不能缓存多层级路由菜单问题解决

const _import = require('@/router/_import_prodection');//获取组件的方法
import {tree} from '@/utils/treeDate'
import Layout from '@/views/layout'
import EmptyTemplate from '@/views/layout/EmptyTemplate'

export function filterAsyncRouter(routerlist) {
  const routerlists=tree(routerlist )
  //获取路由信息
  function getRouter(routerlists){
    routerlists.forEach(e => {
    // 删除无用属性
    delete e.catalogCode
    delete e.catalogOrder
    delete e.endpoints
    delete e.fullOrder
    
    // delete e.permName
    // delete e.id
    // delete e.parentId
    e.name=e.catalogName
    
    if (e.parentId === 0||e.children) {//Layout组件特殊处理
      //路径为空时会因为undefind报错,给个默认值来解决
      e.path = e.url||'nopath'
      if(e.url.split('/').length>2){
      //处理多层级路的时候给了一个空模板
        e.component = EmptyTemplate
      }else{
        e.component = Layout
      }
      e.icon='setting-fill'
      
    } else {
      e.icon='circle'
      e.component = _import(e.url)
      //路径为空时会因为undefind报错,给个默认值来解决
      e.path = e.url.split('/')[2]||'nopath'
    }
    // delete e.parentId
    delete e.url
    // if (e.redirect === '') {
    //  delete e.redirect
    // }
    
    if (e.icon !== '' && e.title !== '') { // 配置 菜单标题 与 图标
      e.meta = {
        // title: e.catalogName 中文名称
         // catalogEngName 英文名称
        title: e.catalogEngName,
        titleZh:e.catalogName,
        icon: e.icon
      }
    }
    delete e.catalogName
    delete e.icon
    delete e.title
    // delete e.name//由于名字的存在导致named 错误 删掉
    if (e.children != null) {
      // 存在子路由就递归
      getRouter(e.children)
    }
    })
    return routerlists
  }
  const getRouters=getRouter(routerlists)
    // return asyncRouterMap
    
  return getRouters
}

空模板的代码如下:

<template>
<div>
  <app-main/>
</div>
</template>
<script>
import { AppMain} from './components'
export default {
  name:'EmptyTemplate',
  components:{AppMain}
  
}
</script>

tagsViewd.js关键代码,在cachedViews中加入空模板的name

const state = {
 visitedViews: [],
 cachedViews: ['EmptyTemplate']
}

到此这篇关于keep-alive不能缓存多层级路由菜单问题解决的文章就介绍到这了,更多相关keep-alive不能多层缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
学习javascript文件加载优化
Feb 19 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 #Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 #Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 #Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 #Javascript
You might like
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
JavaScript 事件系统
2010/07/22 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
xml转json的js代码
2012/08/28 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python TCP包注入方式
2020/05/05 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
晚会主持词开场白
2014/03/17 职场文书
保护动物的标语
2014/06/11 职场文书
公共场所标语
2014/06/30 职场文书
安全保证书怎么写
2015/02/28 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书