首页 > 其他分享 >使用vue的keep-alive缓存组件,三级菜单组件无法缓存问题解决

使用vue的keep-alive缓存组件,三级菜单组件无法缓存问题解决

时间:2023-05-09 19:55:41浏览次数:63  
标签:vue alive keep 缓存 组件 菜单 matched

使用vue做后台管理系统,需求是所有的菜单打开之后,下次点击的时候的使用缓存,这里很简单的做法就是用来包裹住;但是一级菜单和二级菜单都没有问题,三级菜单就会出现无法缓存的问题,网上找资料说是vue中keep-alive本身存在的缺陷,需要在路由守卫中将matched属性做一下优化,具体如下

  // 处理keep-alive三级页面不缓存
  if (to.matched && to.matched.length > 2) {
    to.matched.splice(1,to.matched.length -2 )
    next()
  }

 

 

在beforeEach路由钩子中加一下这个判断就行了,亲测有效

标签:vue,alive,keep,缓存,组件,菜单,matched
From: https://www.cnblogs.com/hpx2020/p/17386058.html

相关文章

  • element-ui上传组件,before-upload发送异步请求 + Promise
    element-ui上传组件,before-upload发送异步请求+Promisebefore-upload为false的时候会阻止图片的上传但是和chenge事情一起不行可以:http-request="fnUploadRequest"<el-upload--snip--:before-upload="beforeAvatarUpload"--snip--......
  • keepalived自带版本比较高,出现启动后主备都绑定了vip的情况
    解决办法单播模式些特定环境下不允许发送组播,造成备服务器无法收到p包,就比如某些云服务器吧,默认会禁止组播。可以通过单播的方式解决.单播示例配置:注意此语法在keepalived1.2.11版本以上支持unicastsrcip192.168.1.21###(本地IP地址)unicastpeer{192.168.1.22##(......
  • 微信小程序 自定义组件 监听数据变化 出现异常 Maximum call stack size exceeded.
    代码调用处: 组件内部  本地调试无异常,发布之后出现此异常解决方法:监听属性steps的值变化时,调用处不能使用双向绑定,去掉steps的双向绑定即可,具体的原因未知(不知为啥本地调试不会抛异常) ......
  • keepalived 发生异常进行主备切换的notify.sh脚本
    notify.sh#!/bin/sh#########DESC###########keepalive切换告警提示##########################配置文件和手机号码配置config_file="/etc/keepalived/hostinfo.cfg"alert_user_file="/etc/keepalived/alert_user.cfg"keepalive_config_file="/etc/keepaliv......
  • flutter系列之:做一个修改组件属性的动画
    目录简介flutter中的动画widgetAnimatedContainers使用举例总结简介什么是动画呢?动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个AnimationController来对动画进行详尽的控制,不过直接是用AnimationController是比较复杂的,如果只是对一个widget的属性进行修改,......
  • 11_父组件调用子组件方法
    父组件调用子组件的方法使用ref使用变量+watch使用中间class使用中间classbase-on-controllerfunctionreceiveController(to,from){Object.assign(to,from);}/*vue混入模式*/receiveController.mixin={methods:{receiveController}};expor......
  • 常用组件
    常用组件分页推导首先我们需要明确的时候,get请求也是可以携带参数的,所以我们在朝后端发送查看数据的同时可以携带一个参数告诉后端我们想看第几页的数据其次我们还需要知道一个点,queryset对象是支持索引取值和切片操作的,但是不支持负数索引情况接下来我们就可以推导我们的自定......
  • 【深入浅出 Yarn 架构与实现】6-3 NodeManager 分布式缓存
    不要跳过这部分知识,对了解NodeManager本地目录结构,和熟悉Container启动流程有帮助。一、分布式缓存介绍主要作用就是将用户应用程序执行时,所需的外部文件资源下载缓存到各个节点。YARN分布式缓存工作流程如下:客户端将应用程序所需的文件资源(外部字典、JAR包、二进制......
  • 几个常用切比较流行的WpordPress缓存插件,提高用户体验,以及优化SEO。
    W3TotalCache:这是一个免费的插件,可以通过缓存页面、数据库查询和对象来提高网站的速度,减少加载时间。WPSuperCache:这也是一个免费的插件,其主要功能是在服务器端生成静态HTML文件,以减少动态页面的生成次数。WPFastestCache:这个插件可以缓存页面、最小化HTML和CSS、延......
  • vue中手动清除KeepAlive缓存
    首先,这是vue的官方文档 KeepAlive|Vue.js(vuejs.org) KeepAlive组件能够保存当前组件状态,在进行路由跳转时变为【不活跃状态】而非卸载。但是官方并没有提供清除缓存的方法(除了刷新页面,整体重建)  假设以下是我们路由&对应组件的代码<router-viewv-slot="{Component}"......