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