keep-alive组件,是实现从B页面进A页面不刷新,其他页面进A页面都刷新
首先,在A路由元信息meta中添加一个isBack字段,用来解决beforeRouterEnter不能直接访问vue实例。
...
{
path: '/A',
name: 'A',
component: List1,
meta: {
keepAlive: true,
isBack: false
}
},
{
path: '/B',
name: 'B',
component: List2,
meta: {
keepAlive: true
}
}
...
借助beforeRouteEnter钩子函数来判断页面来源:
beforeRouteEnter(to, from, next) {
if(from.name === 'A') {
to.meta.isBack = true;
}
next();
},
需要借助keep-alive提供钩子函数activated来完成是否更新:
activated() {
if(!this.$route.meta.isBack) {
Object.assign(this.$data, this.$options.data())
this.getData();
}
this.$route.meta.isBack = false
},