Vue中如何避免keepAlive导致组件缓存问题？

本文共计314个文字，预计阅读时间需要2分钟。

1. 检查app.vue文件，这是重点，不要忘记添加（我忘记添加了keep-alive）+template+div+keep-alive+router-view+v-if=route.meta.keepAlive/router-view+/keep-alive+router-view+v-if=!route.meta.keepAlive/router-view+/d

1.查看app.vue文件，这个是重点，不能忘记加（我就是忘记加了keep-alive）

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

2.查看router.js

{ path:'/loanmessage', component:loanmessage, name:'loanmessage', meta: { keepAlive: true, //代表需要缓存 isBack: false, },

3.在需要缓存的页面加入如下代码

beforeRouteEnter(to, from, next) { if (from.name == 'creditInformation' || from.name == 'cityList') { to.meta.isBack = true; } next(); }, activated() { this.getData() this.$route.meta.isBack = false this.isFirstEnter = false },

附上钩子函数执行顺序：

• 不使用keep-alive
  

beforeRouteEnter --> created --> mounted --> destroyed

• 使用keep-alive
  

beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。

总结

到此这篇关于Vue中使用keepAlive不缓存问题（已解决）的文章就介绍到这了,更多相关Vue使用keepAlive不缓存内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！