vue keep-alive多层级路由支持问题分析

更新时间：2023年03月03日 10:50:03 作者：小墨宝

这篇文章主要介绍了vue keep-alive多层级路由支持,在文章开头给大家介绍了keep-alive使用问题，解决使用keep-alive include属性问题，本文给大家介绍的非常详细，需要的朋友可以参考下

keep-alive使用

属性值

1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3.max - 数字。最多可以缓存多少组件实例。

注：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配

会执行的两个生命周期

activated(){
       console.log("keep进入")
       if(this.activeName!='1'){
         this.activeName='1'
       }
    },
    deactivated(){
      console.log("keep离开")
    }

问题：vue 内置的缓存组件keep-alive，缓存的只有第一层的组件
类似于这样的多层级组件是无法支持的

我们项目里的路由还是动态的，其实跟上面一样主要处理

item.component = { render: (e) => e(‘router-view’) }
这个是router-view容器当你这一层不需要组建的时候用的

其实逻辑也就是循环遍历后端返回数据，根据key动态的加载页面

解决：使用keep-alive include属性

1。直接平铺路有，这个不建议，很多路有菜单都是在侧边栏有层级的

2.这里采用第二种
1）新建MenuMain.vue组件如下

// src/layout/component/MenuMain.vue
// 提供多级菜单的容器
<template>
  <keep-alive :include="cachedViews">
    <router-view :key="key" />
  </keep-alive>
</template>
 
<script>
export default {
  name: 'MenuMain', // 必须命名
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

2）将此容器取代处理数据时render的 router-view 容器

3）include 数组始终都有允许MenuMain缓存

cachedViews: ['MenuMain']

cachedViews缓存数组用在 menuMain。vue中和你的入口 app.vue router-view

到此这篇关于vue keep-alive多层级路由支持的文章就介绍到这了,更多相关vue keep-alive多层级路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue实现录制屏幕并本地保存功能
这篇文章主要介绍了Vue实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-04-04
vue 中使用 this 更新数据的一次问题记录
这篇文章主要介绍了vue 中使用 this 更新数据的一次大坑 ,我在 vue 实例中声明了一个数组属性如 books: []，在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新，感兴趣的朋友跟随小编一起看看吧
2022-11-11
vue下的elementui轮播图自适应高度问题
这篇文章主要介绍了vue下的elementui轮播图自适应高度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue中jsencrypt与base64加密解密的实用流程
vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
使用Vue-cli 中为单独页面设置背景图片铺满全屏
这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue 处理跨域问题及解决方法小结
跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧
2021-09-09
如何写好一个vue组件,老夫的一年经验全在这了（推荐）
这篇文章主要介绍了如何写好一个vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue实现3D切换滚动效果
这篇文章主要为大家详细介绍了vue实现伪3D切换滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
tdesign vue初始化组件源码解析
这篇文章主要为大家介绍了tdesign vue初始化组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
vue关于this.$refs.tabs.refreshs()刷新组件方式
这篇文章主要介绍了vue关于this.$refs.tabs.refreshs()刷新组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03