解决Vue中使用keepAlive不缓存问题
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue中使用keepAlive不缓存问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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不缓存内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！