vue 解决上一级页面渲染数据无法保存问题

我们只用在 app.vue 使用keep-alive包起router-view就行啦

` <keep-alive>
        <router-view  ></router-view>
     </keep-alive>`

但是这样子还不是不够了 应为我们不是每个页面都需要保存缓存所以我们在路由注册的时候 `   

{
      path: '/',
      name: 'idnex',
      component: idnex,
      meta: {
        title:"登录",
        keepAlive:false//false不需要缓存 true需要缓存
      }
    }

使用 keepAlive 来判断是否需要缓存，并且在 app.vue 中使用$route.meta.keepAlive 获取到当前路由页面的keepAlive值来进行显示

<router-view v-if="!$route.meta.keepAlive" ></router-view>
  <keep-alive>
     <router-view  v-if="$route.meta.keepAlive" ></router-view>
  </keep-alive>

但是 这样 并没有完 ， 因为 如果 我 从 A-B ,B需要缓存 ,C-B，B不需要缓存怎么办呢？ 这时候 你可以使用 router.beforeEach 注册一个全局前置守卫 在router中使用

router.beforeEach((to, from, next) => {
  //to  即将要进入的目标 路由对象
  //from  当前导航正要离开的路由
  //next  一定要调用该方法来 resolve 这个钩子
  next();
})

这样 你页面的每一次跳转 beforeEach 都能时刻记录的 路由信息 ，这样我们就可以解决上面的问题了。

如有问题 希望大家 多多在评论区提出 。 谢谢QAA
官网地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB