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

2.查看router.js
{
path:'/loanmessage',
component:loanmessage,
name:'loanmessage',
meta: {

keepAlive: true, //代表需要缓存

isBack: false,
},
{
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

},
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


不使用keep-alive

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

使用keep-alive


使用keep-alive

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