vue-router與keep-alive
keep-alive是vue內置的一個組件，可以使被包含地組件保留狀態，或避免重新渲染，
router-vue是vue-router里注冊地組件，我們之前學了它是一個占位符，如果 被包裹在keep-alive里邊，所有路徑匹配到地視圖組件都會被快取
我們知道vue生命周期，里邊有很多的回呼函式，當到不同的階段會執行對應的回呼函式，
那一個vue實體何時開始和結束呢，我們在Home.vue里自定義該回呼函式
/*創建組件時會進行回呼的*/ created() { console.log('created') }, /**/ destroyed() { console.log('destroyed') }
然后我們發現，我們看到首頁時，顯示created，切換路由時，顯示destroyed，再次切換回來又出現了created,說明，每次路由切換，對應的vue實體都會經歷創建和銷毀的程序，回傳時不會保留快取，
使用keep-alive
將對應位置的占位符router-view用keep-alive包裹即可
<keep-alive>
<router-view/>
</keep-alive>
此時切換頁面并不會銷毀頁面
有一個問題，我首頁有訊息和新聞兩個按鈕，我想進入首頁時，直接顯示新聞，然后我點擊訊息，切換到訊息，然后切出首頁，回傳時首頁又是顯示新聞，而我想保留開始的訊息頁面
補充一下
/*當頁面活躍執行函式*/
activated() {
},
/*不活躍頁面執行函式*/
deactivated() {
}
這兩個函式不像created/destroyed,什么時候都可以被呼叫，只有該組件保持了狀態使用了keep-alive時，才會生效，
也就是想上邊一樣，我們使用了keep-alive包裹著router-view標簽，那么router-link（自定義事件跳轉）里的對應組件都會保留狀態
實作上邊的效果，我們不使用重定向，直接保存一個路由地址
data() {
return {
message: '你好啊',
path:'/home/news'
}
},
這個地址就是為了我們進入home頁面直接跳轉到news頁面
/*活躍頁面執行函式*/
activated() {
this.$router.push(thi.path)
},
/*不活躍頁面執行函式*/
deactivated() {
this.path=this.$route.path
}
我們在首頁里定義的activaed和deactivaed函式，當home頁面被點擊活躍時，將新聞頁面路由push進堆疊，顯示新聞頁面，
當切換頁面時，首頁不再活躍，執行deactivaed函式，將活躍的路由地址替換成默認地址，即是保存上一次地址
注意這兩個route和router不同
失敗：
因為這個deactivaed函式是進入不活躍時呼叫的，此時活躍的頁面已經是下一個頁面了，而不是剛付訓躍的那個頁面，比如我進來是首頁下的新聞頁面，我點擊訊息頁面，此時活躍的是訊息頁面，我想把訊息頁面路由保存下來，可是切換到用戶頁面時，此時的活躍頁面已經不活躍了，再執行router就無法保存，我們必須在頁面切換之前保存當前的活躍頁面
改進：
組件內的守衛:
我們使用最后一個beforeRouterLeave來代替deactivaed，當頁面要離開之前，此時活躍頁面還是當前頁面，保存地址，
beforeRouteLeave (to, from, next) { this.path = this.$route.path; next() }注意是this.path，上邊之前我寫成path，在方法里呼叫data資料要加上this.
實作了目的，
注意點
我們在app.vue里設定keep-alive只能對app.vue里使用該占位符的路由起作用，也就是只有首頁/關于/用戶/檔案等路由會被保存狀態，首頁自己的子組件不會被保存狀態，除非再對home.vue里的router-view設定keep-alive.
如果我們單獨不像讓檔案保存狀態每次重繪呢？
可以使用include/exclude屬性來實作
<keep-alive exclude="Profile,User"> <router-view/> </keep-alive>
exclude/include里邊字串就是組件對應的名字,name屬性在這里有用，并且多個name之間不能有空格，空格不是想加就加的，正則里也不能隨意加空格，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/248115.html
標籤：其他