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

问题描述：

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

代码：

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

?

1 2 3

meta: {   keepAlive: true }

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

?

1 2 3 4 5 6 7 8

<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，失败！

?

1 2 3 4

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

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

开始改代码：

?

1 2 3 4 5 6 7 8

<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