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 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
jQuery 插件开发指南
Nov 14 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
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
1 Tube Radio
2021/03/02 无线电
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP获取url的函数代码
2011/08/02 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python读写二进制文件的方法
2015/05/09 Python
基于Python实现用户管理系统
2019/02/26 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
关于VPN
2012/06/10 面试题
建筑工程专业学生的自我评价
2013/12/25 职场文书
邮政员工辞职信
2014/01/16 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
中文专业自荐书
2014/06/29 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
党性分析材料格式
2014/12/19 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技