場景
今天産品跑過來跟我說，
當我在A頁面修改資料後，去B頁面。
然後傳回A頁面。希望A頁面保留我修改後的資料。
而不是資料又恢複最初的樣子了。我心裡想，尼瑪,又要加班了？
看下面小粒子
資料被被重置的問題
<template>
<div>
<el-button @click="gotosHander">去詳情頁面</el-button>
<el-button @click="changeHander">改變資料</el-button>
<ul class="box">
<li class="demoli" v-for="(item,index) in list" :key="index">
{{ item.name }}==> {{item.age }}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
list:[
{name:'張三',age:23},
{name:'李四',age:33},
]
}
},
methods:{
gotosHander(){
this.$router.push("/details")
},
changeHander(){
this.list=[
{name:'何西亞',age:33},
]
}
}
}
</script>
我們發現的問題
在頁面更改資料後，我們去詳情頁面。
在傳回上一個頁面。資料被重置了。
但是我們并不想資料重置。
想讓他保留我們更改後的樣子，
怎麼辦？？？？？
使用keep-alive解決資料被重置
<keep-alive>
<router-view></router-view>
</keep-alive>
在頁面中使用一個定時器
<template>
<div>
<el-button @click="gotosHander">去詳情頁面</el-button>
</div>
</template>
<script>
export default {
data(){
return{
timer:null
}
},
methods:{
gotosHander(){
this.$router.push("/details")
},
},
mounted(){
this.timer=setInterval(()=>{
console.log("@@@@@@@@@@@@@@@@@@@")
},100)
},
beforeDestroy(){
clearInterval(this.timer)
}
}
</script>
keep-alive産生的問題
如果我們在頁面中寫一個定時器，
那麼這個定時器在beforeDestroy中将不會被清除。
也就是說:使用keep-alive後，頁面中的beforeDestroy不會被執行
如何讓頁面中的beforeDestroy被執行
我們可以使用生命周期 activated 和 deactivated
activated是頁面或者元件被激活的時候觸發該函數，
激活可以了解為展示在頁面上的時候。
deactivated是頁面别取消隐藏的時候觸發該函數
我們從詳情頁進入該頁面的時候，
使用activated函數。因為是展示嘛~
當我們離開該頁面的時候觸發函數deactivated，因為是隐藏嘛~
從詳情頁進入該頁面
<template>
<div>
<el-button @click="gotosHander">去詳情頁面</el-button>
</div>
</template>
<script>
export default {
data(){
return{
timer:null
}
},
methods:{
gotosHander(){
this.$router.push("/details")
},
},
mounted(){
this.timer=setInterval(()=>{
console.log("@@@@@@@@@@@@@@@@@@@")
},100)
},
activated(){
console.log("頁面被激活的時候觸發該函數")
},
deactivated(){
clearInterval(this.timer)
console.log("頁面被取消/切換的時候觸發該函數")
},
}
</script>
keep-alive的後遺症
剛剛我們說了，使用keep-alive後，預設情況下，
所有頁面中的beforeDestroy和destroyed生命周期函數不會被執行了
我的個乖乖~，好可怕！
其實也不是沒有辦法，隻是我們使用include。
include隻會緩存與之比對的值
include的使用
<keep-alive include="yourPageName">
<router-view></router-view>
</keep-alive>
上面這段代碼隻會緩存【頁面、元件】名是yourPageNamede
如果你需要緩存多個頁面或者元件。
你可以寫成一個數組
<keep-alive :include="['yourPageName','xingqing']">
<router-view></router-view>
</keep-alive>
<template>
<div>
<el-button @click="backHander">傳回上一頁</el-button>
我是詳情頁面
</div>
</template>
<script>
export default {
//這個是元件或者頁面名。
// 因為include會自動比對，該元件會被緩存
// 是以銷毀的生命周期是不會被執行的
// activated【激活、展示】 和 deactivated【隐藏、離開】會被執行
name:'xingqing',
}
</script>
作者：明月人倚樓
出處：https://www.cnblogs.com/IwishIcould/
想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！
如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！
萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！
支付寶
微信
本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接
如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。