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 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
纯javascript制作日历控件
Jul 17 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vuex操作state对象的实例代码
Apr 25 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
js实现点击生成随机div
Jan 16 Javascript
深入理解javascript中的this
Feb 08 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网站开发中常用的8个小技巧
2015/02/13 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP实现合并discuz用户
2015/08/05 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
jquery与prototype框架的详细对比
2013/11/21 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python中有趣在__call__函数
2015/06/21 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
电教室标语
2014/06/20 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
行政文员岗位职责
2015/02/04 职场文书
项目合作意向书
2015/05/08 职场文书
居安思危观后感
2015/06/11 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技