解决Vue中使⽤keepAlive不缓存问题
1.查看app.vue⽂件,这个是重点,不能忘记加(我就是忘记加了keep-alive)
<template>
<div>
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
</div>
</template>react router缓存
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') {
}
next();
},
activated() {
this.$a.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不缓存内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论