vue keep alive,vue中keepalive的缓存机制是什么
本文主要介绍vue中的keep-alive组件来实现多级嵌套路由的缓存。通过示例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
状态(问题):探索方案：实施方法
现状(问题):
保活组件无法缓存3级及以上的路由页面。
探索方案：
1.方案：直接对路由进行扁平化配置，放在一级或二级路由中。
2.另一层缓存组件用于过渡，其名称在include中配置。
实现方式
方案1不需要例子，按照规则配置路由即可。突出显示了方案2。
因为我是用vue-element-admin做架构的，而且在项目中是通过服务器返回所有菜单和路由进行统一配置，所以只能用方案二来实现。
直接看原代码(问题代码)
//src/layout/component/appmain . vue
模板
section class=app-main
过渡名称=渐变-变换模式=出-入
keep-alive:include= cache dviews
路由器视图：key=key /
/保持活力
/过渡
/部分
/模板
脚本
导出默认值{
名称： AppMain ，
计算值：{
cachedViews() {
归还这个。$ store . state . tags view . cachedviews
},
key() {
归还这个。$route.path
}
}
}
/脚本
我从后端拿到数据后，按照树形结构处理(写在商店里，只显示关键代码)
//得到数据后，循环第一层，把布局交给组件。
generateRoutes({ commit }，routeList) {
返回新承诺(resolve={
routeList.forEach(items={
items.component=布局
//如果有子菜单，直接回收赋值。
items . children=changeasyncproutes(items . children)
})
提交( SET_ROUTES ，routeList)
解析(routeList)
})
}
功能变化异步路由(路由){
const res=[]
routes.forEach(route={
const tmp={.路线}
if(tmp . children tmp . children . length！==0) {
//如果有子容器，首先创建路由器视图容器，然后递归(关键点)
tmp.component={
render: c=c(路由器视图)
}
tmp . children=changeasyncproutes(tmp . children)
}否则{
//没有直接将组件字符串解析成组件对象的子菜单
tmp . component=import method(tmp . component)
}
资源推送(tmp)
})
返回资源
}
这样的写法很完美，可惜我遇到了三级菜单无法缓存的问题。
直接解决问题的代码。
1.新创建的MenuMain.vue组件如下
//src/layout/component/menu main . vue
//提供多级菜单的容器
模板
keep-alive:include= cache dviews
路由器视图：key=key /
/保持活力
/模板
脚本
导出默认值{
Name: MenuMain ，//必须命名
计算值：{
cachedViews() {
归还这个。$ store . state . tags view . cachedviews
},
key() {
归还这个。$route.path
}
}
}
/脚本
2.使用此容器处理数据时，替换路由器视图容器进行渲染；
//引入组件
从“@/layout/components/MenuMain”导入MenuMain
功能变化异步路由(路由){
const res=[]
routes.forEach(route={
const tmp={.路线}
if(tmp . children tmp . children . length！==0) {
//继续关注。
tmp.component=MenuMain
//{
//render: c=c(路由器视图)
//}
tmp . children=changeasyncproutes(tmp . children)
}否则{
tmp . component=import method(tmp . component)
}
资源推送(tmp)
})
返回资源
}
3.始终将MenuMain组件的名称保存在存储区的cachedViews数组中。
cachedViews: [MenuMain]
关于vue中keep-alive组件实现的多级嵌套路由缓存的文章到此为止。请搜索我们之前的文章或继续浏览下面的相关文章，了解更多关于vue keep-alive中多级嵌套路由的缓存信息。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。