Vue页面缓存 实现 前进刷新，后退不刷新

场景

场景描述：有 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()：函数不能省略，否则页面处于等待状态，不会往下执行