解决Vue中使用keepAlive不缓存问题

解决Vue中使用keepAlive不缓存问题

446
2020-09-08 10:44:47

这篇文章主要介绍了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不缓存问题 (https://www.wpmee.com/) javascript教程 第1张

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持