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