场景
场景描述：有 A>B>C 三个层级的页面
想要实现 A>B 跳转时，B 页面进行数据刷新，
C>B 返回时，B 页面不刷新，仍停留原来的位置
解决
定义路由
router.js
const routes =[
{
name:'a'
path:'/A',
component:()=>import('@/pages/A'),
meta:{
title:'A页面'
}
},
{
name:'b',
path:'/B',
component:()=>import('@/pages/B'),
meta:{
title:'B页面',
keepAlive:true //主角是 B 页面，这句要加上
}
},
{
name:'c', //判断跳转时使用，需要加
path:'/C',
component:()=>import('@/pages/C'),
meta:{
title:'C页面'
}
}
]
我们的主角是
B页面，所以B页面路由一定要加上name和keepAlive:true属性，即让B页面默认缓存
C页面对应的路由定义也需要加上name:'c'属性，其他页面可以不用加
添加 Router 钩子函数
在 B.vue 中添加钩子函数 beforeRouteLeave 根据跳转的页面动态调整 keepAlive 缓存属性的值
//A>B>C A>B刷新 C>B不刷新
beforeRouteLeave(to, from, next) {
if (to.name === 'c') {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
}
next();//不可缺少
},
注意
beforeRouteLeave是Router路由的钩子函数，位置与methods同级，不要放到methods内部
参数：
to：表示本次跳转要到达的目标路由
from：表示本次跳转从哪个页面跳转，一般就是当前页面
next()：函数不能省略，否则页面处于等待状态，不会往下执行
