深入理解vue-router之keep-alive

2023-09-25 12:20:05 44

本文基于Vue2.0

keep-alive简介

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

用法也很简单：

props

include-字符串或正则表达，只有匹配的组件会被缓存
exclude-字符串或正则表达式，任何匹配的组件都不会被缓存

//组件a
exportdefault{
name:'a',
data(){
return{}
}
}





可以保留它的状态或避免重新渲染





可以保留它的状态或避免重新渲染

遇见vue-router

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存：

然而产品汪总是要改需求，拦都拦不住...

问题

如果只想router-view里面某个组件被缓存，怎么办？

使用include/exclude
增加router.meta属性

使用include/exclude

//组件a
exportdefault{
name:'a',
data(){
return{}
}
}

exclude例子类似。

缺点：需要知道组件的name，项目复杂的时候不是很好的选择

增加router.meta属性

//routes配置
exportdefault[
{
path:'/',
name:'home',
component:Home,
meta:{
keepAlive:true//需要被缓存
}
},{
path:'/:id',
name:'edit',
component:Edit,
meta:{
keepAlive:false//不需要被缓存
}
}
]

优点：不需要例举出需要被缓存组件名称

【加盐】使用router.meta拓展

假设这里有3个路由：A、B、C。

需求：

默认显示A
B跳到A，A不刷新
C跳到A，A刷新

实现方式

在A路由里面设置meta属性：

{
path:'/',
name:'A',
component:A,
meta:{
keepAlive:true//需要被缓存
}
}

在B组件里面设置beforeRouteLeave：

exportdefault{
data(){
return{};
},
methods:{},
beforeRouteLeave(to,from,next){
//设置下一个路由的meta
to.meta.keepAlive=true;//让A缓存，即不刷新
next();
}
};

在C组件里面设置beforeRouteLeave：

exportdefault{
data(){
return{};
},
methods:{},
beforeRouteLeave(to,from,next){
//设置下一个路由的meta
to.meta.keepAlive=false;//让A不缓存，即刷新
next();
}
};

这样便能实现B回到A，A不刷新；而C回到A则刷新。

总结

路由大法不错，不需要关心哪个页面跳转过来的，只要router.go(-1)就能回去，不需要额外参数。

然而在非单页应用的时候，keep-alive并不能有效的缓存了==

参考

issues#811
vue#keep-alive
vue2.0keep-alive最佳实践

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

深入理解vue-router之keep-alive

热门推荐

随机推荐