keep-alive 缓存的时候,我想动态的判断一个组件是否缓存,因为一个组件进去的方式不同有时候需要缓存有时候不需要缓存
假设这里有 3 个路由: A、B、C。
需求:
默认显示 A
B 跳到 A,A 不刷新
C 跳到 A,A 刷新
在 A 路由里面设置 meta 属性:
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被缓存
}
}
在 B 组件里面设置 beforeRouteLeave:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 A 缓存,即不刷新
next();
}
在 C 组件里面设置 beforeRouteLeave:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让 A 不缓存,即刷新
next();
}
这样的话第一次 B 到 A 刷新,之后就没事了,
我 console.log(to.meta.keepAlive) 打印的值也是 true
怎么才能解决这个问题呢? 在线等
你在A组件里打印的 to.meta.keepAlive值?如果不是,可以在A组件加入
这行代码,我这边没有问题。
图1:App.vue
图2:A.vue
图3:B.vue
图4:C.vue
在router里,给A.vue设置:
A.vue里的beforeRouteEnter函数可以不加,我这里只是为了看to.meta.keepAlive的值是否正确