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不會再執行，
于此文記之！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/18367.html
標籤：JavaScript
上一篇：淺談js陣列中的length屬性
下一篇：JavaScript初識