問題描述:
在keep-alive中的在跳轉到指定的路由時刷新對應的路由,其余不刷新。
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
有幾種解決方式:
1.在keep-alive中直接添加 include,cachedViews(Array類型:包含vue文件的組件name都將被緩存起來);反之exclude則是不包含;
注意:所有.vue組件文件都必須附上name屬性!!!建議用vuex管理cachedViews
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
2.監測$router的變化;
watch: {
// 如果路由有變化,會再次執行該方法
"$route": "fetchDate"
}
但是會在頁面離開時再次執行fetchDate,並不是我們需要的,所以可以在to和from上添加執行邏輯,但也是十分的麻煩
//$router是只讀狀態,所以賦值操作會失效
watch: {
$route (to, from) {
if(list.indexOf(from.path) > -1){ //自行添加邏輯,list為你不想有緩存的路徑
this.getData()
}
}
}
3.在添加keep-alive后會增加兩個生命周期mounted>activated、離開時執行deactivated,路由的進入和切換回相應的觸發activated和deactivated,這樣就可以在每次入路由執行更細致的操作了
//如果是服務端渲染就算了
activated() {
//只刷新數據,不改變整體的緩存
this.fetchDate();
}
4.還有更簡單粗暴的
//我就笑笑不說話
<div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
5.還有種情況,在不同路由應用了相同的vue組件
{path:'aaa',component:Mompage,name:'mom'},
{path:'bbb',component:Mompage,name:'momPlus'}
默認情況下當這兩個頁面切換時並不會觸發vue的created或者mounted鈎子,需要手動的watch:$router(又回到上面的步驟),或者在router-view上加上唯一值。
//隨便抄一段代碼過來
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
有錯誤的,請指出
