(编辑:jimmy 日期: 2024/12/25 浏览: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> </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 },
附上钩子函数执行顺序:
beforeRouteEnter --> created --> mounted --> destroyed
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。
总结