前言:之前有一个项目,有两种权限的账户,页面主要就是一个首页和N多个详情页,从详情页返回首页的时候页面要求kepp-alive缓存,很快这个需求就ok了,但是切换了下账号,登录进来进入详情页后,返回首页,居然显示的是上一个账号缓存的内容,找了好久,终于看到网上大佬写的,解决了这个问题
1.keep-alive
keep-alive
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。使用方法:
1.结合路由进行使用
keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
2.动态匹配路由(所有的组件都必须给name)
- include: 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 将不缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
3.keep-alive的生命周期
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序:
created -> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
4.使用方法
- 首页是A页面
- B页面跳转到A,A页面需要缓存
- C页面跳转到A,A页面不需要被缓存
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被缓存
}
}
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // B 跳转到 A 时,让 A 缓存,即不刷新
next();
}
};
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存,即刷新
next();
}
};
5. 删除keep-alive的方法
1.可以使用 this.$destroy() 清除掉页面存在的keep-alive,但是这样子之后不会再产生keep-alive缓存
2.最佳方法:
看看就好,直接复制粘贴就可以使用,这样子的话,每次退出登录的时候都会把keep-alive删除。
//删除切换账号,之前的账号留下的keep-alvie
beforeRouteLeave:function(to, from, next){
if(to.name=='Login'||to.name=='login'){
if (this.$vnode && this.$vnode.data.keepAlive){
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache){
if (this.$vnode.componentOptions){
var key = this.$vnode.key == null? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag
? `::${this.$vnode.componentOptions.tag}` : ''): this.$vnode.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key]){
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
}
// this.$destroy();
next();
},
3.使用vuex,大概原理是每次把需要缓存的组件存起来,退出清空,大概是这样吧,没这样使用过...
以自己的一些理解和网上大佬的心得结合,看看就好,欢迎大佬补充和纠正错误
-----愿物与我皆美好