首页 > 作文

vue中keep

更新时间:2023-04-04 11:45:19 阅读: 评论:0

1.问题描述

对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时索马里战争,正常切换两个便捷页签时是可以正常缓存的,但删除最后一个页签时,此时另一个页签页面此时已经不缓存了。

2.原因分析

keep-alive默认支持缓存是两级,对三级及以上层级的页面缓存失效,之前的处理方式为: 监听到路由变化后,将当前的路由的标识及父级标识一起存起来,当多个页面存在时,关闭其中一个页面,也会将本身及父级的标识一起删掉,此时数组中已无父级标识,其他同级页面的缓存将失效。

3.解决思路

将路由配置表的所有路由拆成两个操作,一是保持原样用于菜单的展示,二是对路由配置写人文章表进行扁平化处理,将所有的路由处理成二级路由,这样keep-alive就能默认支持缓存了。

4.处理过程

拿到完整的路由配置

const modules = []files.keys().foreach(key => {    const filesobj = files(key).default || files(key)    object.keys(filesobj).foreach(keyone => {        modules.push(filesobj[keyone])    })})

操作完成路由配置

export const menulist = modules;  // 用于菜单展示​const routerlist = formattwostageroutes(formatflatteningroutes(modules)); // 将路由扁平化为二级路由​const router = new vuerouter({    scrollbehavior: () => ({ y: 0 }),    曾敏杰mode: 'history',    ba: process.env.ba_url,    routes: routerlist, // 在路由配置项中使用扁平化处理后的路由})

扁平化方法

export const formatflatteningroutes =(routeslist => {  if (routeslist.length <= 0) return routeslist;  le竞聘演讲稿pptt list = [];  routeslist.foreach(v => {    if(v.path === '/') {      // 用于添加初试layout和首页,其他各中心配置过滤掉layout及父节点,只保留children内路由      list.push(v);      list = list.concat(formatflatteningroutes(v.children))    } el if (v.children && v.children.length > 0) {      list = list.concat(formatflatteningroutes(v.children))    } el {      list.push(v);    }  })  return list;})​export const formattwostageroutes = list => {  if (list.length <= 0) return list;  const routerlist = [];  list.foreach(v => {    if (v.path === 北京自助游'/') {      routerlist.push({        component: v.component,        name: v.name,        path: v.path,        redirect: v.redirect,        meta: v.meta,        children: []      })    } el if (v.path === '/login' || v.path === '/showcapage') {      // 不需要配置layout的页面      routerlist.push(v)    } el {      routerlist[0].children.push({ ...v })    }  })  return routerlist;}

到此这篇关于vue中keep-alive多级路由缓存问题的文章就介绍到这了,更多相关vue keep-alive多级路由缓存内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-04 11:45:17,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/7fa56d7f635ec0a149fe2fddafa39f6c.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:vue中keep.doc

本文 PDF 下载地址:vue中keep.pdf

标签:路由   缓存   页面   标识
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图