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多层级路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue3中vuex与pinia踩坑的相关资料,需要的朋友可以参考下2021-12-12
这篇文章主要给大家介绍了关于vue封装自定义分页器组件与使用方法的相关资料,非常的好用,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了vue.js实现插入数值与表达式的方法,结合实例形式分析了vue.js常见的3种插入数值实现方式,并总结了vue.js插值与表达式相关使用技巧,需要的朋友可以参考下2018-07-07
本文主要介绍了Vue3实现简约型侧边栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下2019-04-04
使用element组件table表格实现某条件下复选框无法勾选
这篇文章主要介绍了使用element组件table表格实现某条件下复选框无法勾选问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
自从入了 Vue 之后，一直在用 axios 这个库来做一些异步请求。下面这篇文章主要给大家介绍了关于axios中cookie跨域及相关配置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。2017-12-12
<Teleport> 是 Vue 3 的一个内置组件,允许将组件的内容渲染到 DOM 中的任意位置,而不改变其逻辑结构,这篇文章主要介绍了Vue 3 的＜Teleport＞功能与用法详解,需要的朋友可以参考下2025-04-04
这篇文章介绍了VueX安装及使用基础教程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
这篇文章主要为大家介绍了微信小程序Echarts动态使用及图表层级踩坑解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论