vue 使用keep-alive 三级以上的路由无法缓存解决方案

1、include 包含页面组件name的这些组件页面，会被缓存起来
2、exclude 除了这些name以外的页面组件，会被缓存起来
3、没有include或者exclude属性，表示所有的路由组件都会被缓存起来

<keep-alive>
  <router-view :key="key" />
</keep-alive>computed: {
 key() {
  return this.$route.path
 }
}

注意
include 或者exclude的name 是页面组件里面具体的name，区分大小写

访问三级路由时，3级根路由的名称不会存入state.tagsView.cachedViews中，所以三级路由页面不会缓存。
解决方案：
在三级路由根页面中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存了

<script>
export default {
  name: 'Menu1',
  data() {
  return {
      ...
   }
 },
 created() {
   const route = this.$route.matched.find(item => item.name === this.$options.name)
   this.$store.dispatch('tagsView/addCachedView', route)
 }
}
</script>

vue 使用keep-alive 三级以上的路由无法缓存解决方案相关推荐

七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
Vue学习笔记（四）—— 前端路由
介绍本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
基于vue实现精妙绝伦的三级联动
基于vue实现精妙绝伦的三级联动 ps:笔者为初学者,自己想的不容易,别喷我 <template><view class="index"><!-- 三 ...
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目第一步:将Vue项目打包,然后将生成的dist文 ...
vue中tab标签页keep-alive二级路由+删除指定缓存页面
1.实现效果 2.keep-alive 2.1是什么: keep-alive 是 Vue 的内置组件,keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 transiti ...
vue 路由页面缓存
VUE框架真的很神奇,神奇到好多坑你都要填这次说说VUE里缓存页面的问题现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西.填很多坑!现在如果要求前端 ...
Vue 中设置浏览器的 title 跟随路由的名称变化
Vue 中设置浏览器的 title 跟随路由的名称变化浏览器title的变化会根据路由的变化而改变可以先设置一个公共的文件夹setting, 用于存放公共的名称, 例如这里的 `小火车况且况且 m ...
vue中使用baidushare分享到微信无法显示bug解决方案
vue中使用baidushare分享到微信无法显示bug解决方案参考文章: (1)vue中使用baidushare分享到微信无法显示bug解决方案 (2)https://www.cnblogs.co ...

vue 使用keep-alive 三级以上的路由无法缓存解决方案

vue 使用keep-alive 三级以上的路由无法缓存解决方案相关推荐

最新文章

热门文章