vue 路由快取 路由巢狀 路由守衛 監聽物理返回操作
最近開發vue專案，遇到的一些問題，這裡整合一下，看到一些部落格已經有寫相關知識，然後自己再次記錄一下。
這是關於vue路由相關比較常見的問題，以後遇到相關路由的問題，會不斷更新這篇部落格。
需求1：從填寫表單A頁面跳轉到B頁面，然後再從B頁面返回到A頁面，實現A頁面的所填的資料保留
一.設定路由快取：
1.App.vue中加入<keep-alive> 具體程式碼如下：
<template> <div id="app"> <!--<img src="./assets/logo.png">--> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 這裡是會被快取的檢視元件A --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 這裡是不被快取的檢視元件B --> </router-view> </div> </template>
2.在路由配置檔案index.js裡面增加meta標籤，程式碼如下：
export default new Router({
routes: [
{
path: '/',name: 'Initinfo',component: Initinfo
},{
path: '/B',name:'B',component: CredentialsDetails,meta:{keepAlive:false}
},{
path: '/A',name:'A',component: ASeal,meta:{keepAlive:true}
}
]
})
ok，做到這裡，就能實現以上需求1。
需求2：在需求1基礎上，增加一個需求就是，快取A表單頁面滾動位置，程式碼如下：
export default new Router({
//使用keep-alive後，可能存在滾動條問題的解決問題
mode:'hash',//預設是hash模式 且有history
scrollBehavior(to,from,savePosition) { // 在點選瀏覽器的“前進/後退”，或者切換導航的時候觸發。
console.log(to) // to：要進入的目標路由物件，到哪裡去
console.log(from) // from：離開的路由物件，哪裡來
console.log(savePosition) // savePosition：會記錄滾動條的座標，點選前進/後退的時候記錄值{x:?,y:?}
if(savePosition){
return savePosition;
}else{
return {
x: 0,y: 0
}
}
},routes: [
{
path: '/',component: Initinfo
},meta:{keepAlive:true}
}
]
})
需求3：
1.預設顯示 A
2. B跳到 A，A 不重新整理
3. C跳到 A，A 重新整理
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
以上是路由守衛官網，可以參考，下面介紹兩個守衛：beforeRouteLeave,beforeRouteEnter
1.在路由的index.js檔案，和以上路由一樣，設定A頁面的meta屬性，程式碼如下：
{
path: '/A',meta:{keepAlive:true}
}
2. 在B元件設定 beforeRouteLeave：程式碼如下：
export default {
beforeRouteLeave(to,next) {
console.log(to);
console.log(from)
// 設定下一個路由的 meta
to.meta.keepAlive = true; // 讓 A 快取，即不重新整理
next();//確保要呼叫 next 方法，否則鉤子就不會被 resolved
}
};
3.在C元件設定 beforeRouteLeave：程式碼如下：
export default {
beforeRouteLeave(to,next) {
console.log(to);
console.log(from)
// 設定下一個路由的 meta
to.meta.keepAlive = false; // 讓 A不快取，即重新整理
next();//確保要呼叫 next 方法，否則鉤子就不會被 resolved
}
};
ok，以上程式碼即可滿足需求3
需求4：
1.A-->B-->C-->D 從A頁面依次進入BCD頁面，現在我要在D頁面點選返回（手機或者瀏覽器物理返回鍵）回到A頁面
2.A-->E-->D 從A頁面一次進入ED頁面，現在我在D頁面點選返回（手機或者瀏覽器物理返回鍵）回到E頁面
以上的需求總結來說就是，根據不同的渠道進入D頁面的時候，當點選返回的時候，進入不同的頁面
1.首先我在入口main.js裡面聲明瞭一個全域性變數（當然你可以按照自己的方式去宣告一個變數）
global.beforeRouteName = "";
2.然後在D元件中，宣告路由守衛：beforeRouteEnter,程式碼如下：
剛進入該元件時，便會進入beforeRouteEnter,在此先賦值：
beforeRouteEnter(to,next){
global.beforeRouteName = from.name; //給全域性變數賦值
next();
},
然後在mounted裡面判斷瀏覽器是否支援popstate
mounted(){
//判斷瀏覽器是否支援popstate
if(window.history && window.history.pushState){
history.pushState(null,null,document.URL);
window.addEventListener('popstate',this.goBack,false);
}
}
其次在methods裡面寫goBack方法，程式碼如下：
goBack(){
if(global.beforeRouteName == "C"){ //判斷，當獲取上個頁面進來的路由是C的時候，返回到A頁面
this.$router.push({name:'A'});
}else if(global.beforeRouteName == "E"){ //判斷，當獲取上個頁面進來的路由是E的時候，返回上一頁
history.go(-1);
}else{
this.$router.push({name:'A'}); //判斷，當有其他返回值的時候，預設返回到A頁面（這個隨意設定，一般不會有這種情況）
}
}
最後一定不要忘記：在destroyed要取消監聽，不然這個監聽一直存在，程式碼如下：
destroyed(){
window.removeEventListener('popstate',false);
}
到此需求4就解決了。
剛剛看了下程式碼，其實路由守衛做這個返回控制其實更簡單。只要好好使用beforeRouteLeave這個守衛就能簡單解決以上問題
補充知識：vue 使用路由守衛監聽返回鍵，控制頁面跳轉
我就廢話不多說了，大家還是直接看程式碼吧~
beforeRouteLeave(to,next) {
// 導航離開該元件的對應路由時呼叫
// 可以訪問元件例項 `this`
if(!this.isPublish){
this.confirmVisible=true
next(false)//不放行
}else {
next()
}
},
以上這篇vue 路由快取 路由巢狀 路由守衛 監聽物理返回操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。