最近项目中被一个keep-alive的问题困扰了很久，项目中有四个页面使用了keep-alive，导致用户退出登录后，使用其他账号登录时，还保存着前一个用户的信息，经历了一系列的暴力删除无效后，最终采用了以下方法，用户退出登陆后移除keep-alive：
<keep-alive exclude="Footbar,Navbar" v-if="isLoggedIn">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive||!isLoggedIn"></router-view>
data() {
return {
isLoggedIn: false,
};
},
watch: {
$route(to, from) {
// if the route changes...
let token = localStorage.getItem("token")||''
if (token) {
// firebase returns null if user logged out
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
}
}
参考了：
https://stackoverflow.com/questions/48661595/how-to-destroy-a-vuejs-component-that-is-being-cached-by-keep-alive
https://zhuanlan.zhihu.com/p/40374425
