Vue-router使用keep-alive失效的坑以及解决方案

问题描述：

需要对页面A进行缓存，保证从二级页面B返回可以保留原状态。页面A开启了keepAlive：true；页面B没有开启keepAlive；页面A跳转到页面B，再从页面B返回页面A，页面A缓存失效。

代码：

1、router.js在路由的meta中设置keepAlive

meta: {
  keepAlive: true
}

2、App.vue设置路由是否被缓存

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

这时候从页面A调到没有设置keepAlive的页面B，再回到页面A，页面A缓存失效。

尝试解决：A页面beforeRouteEnter，设置keepAlive，失败！

beforeRouteEnter(to,form,next){
   to.meta.keepAlive = true;
   next();        
}

n久之后，发现了问题，App.vue配置路由展示的写法不正确，v-if需要写在<router-view />，写在<keep-alive />会导致设置了keepAlive的页面缓存失效

开始改代码：

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

解决！

 

参（非）考（常）来（感）自（谢）：

https://blog.csdn.net/a3335581/article/details/88388303