最近開發(fā)vue項目，遇到的一些問題，這里整合一下，看到一些博客已經(jīng)有寫相關(guān)知識，然后自己再次記錄一下。

這是關(guān)于vue路由相關(guān)比較常見的問題，以后遇到相關(guān)路由的問題，會不斷更新這篇博客。

需求1：從填寫表單A頁面跳轉(zhuǎn)到B頁面，然后再從B頁面返回到A頁面，實現(xiàn)A頁面的所填的數(shù)據(jù)保留

一.設(shè)置路由緩存：

1.App.vue中加入<keep-alive> 具體代碼如下：

<template> <div id='app'> <!--<img src='http://www.aoyou183.cn/bcjs/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，做到這里，就能實現(xiàn)以上需求1。

需求2：在需求1基礎(chǔ)上，增加一個需求就是，緩存A表單頁面滾動位置，代碼如下：

export default new Router({ //使用keep-alive后，可能存在滾動條問題的解決問題 mode:’hash’,//默認是hash模式 且有history scrollBehavior(to,from,savePosition) { // 在點擊瀏覽器的“前進/后退”，或者切換導航的時候觸發(fā)。 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: ’/’, name: ’Initinfo’, component: Initinfo }, { path: ’/B’, name:’B’, component: CredentialsDetails, meta:{keepAlive:false} }, { path: ’/A’, name:’A’, component: ASeal, meta:{keepAlive:true} } ]})

需求3：

1.默認顯示 A

2. B跳到 A，A 不刷新

3. C跳到 A，A 刷新

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

以上是路由守衛(wèi)官網(wǎng)，可以參考，下面介紹兩個守衛(wèi)：beforeRouteLeave,beforeRouteEnter

1.在路由的index.js文件，和以上路由一樣，設(shè)置A頁面的meta屬性，代碼如下：

{ path: ’/A’, name:’A’, component: ASeal, meta:{keepAlive:true} }

2. 在B組件設(shè)置 beforeRouteLeave：代碼如下：

export default { beforeRouteLeave(to, from, next) { console.log(to); console.log(from) // 設(shè)置下一個路由的 meta to.meta.keepAlive = true; // 讓 A 緩存，即不刷新 next();//確保要調(diào)用 next 方法，否則鉤子就不會被 resolved }};

3.在C組件設(shè)置 beforeRouteLeave：代碼如下：

export default { beforeRouteLeave(to, from, next) { console.log(to); console.log(from) // 設(shè)置下一個路由的 meta to.meta.keepAlive = false; // 讓 A不緩存，即刷新 next();//確保要調(diào)用 next 方法，否則鉤子就不會被 resolved }};

ok，以上代碼即可滿足需求3

需求4：

1.A-->B-->C-->D 從A頁面依次進入BCD頁面，現(xiàn)在我要在D頁面點擊返回（手機或者瀏覽器物理返回鍵）回到A頁面

2.A-->E-->D 從A頁面一次進入ED頁面，現(xiàn)在我在D頁面點擊返回（手機或者瀏覽器物理返回鍵）回到E頁面

以上的需求總結(jié)來說就是，根據(jù)不同的渠道進入D頁面的時候，當點擊返回的時候，進入不同的頁面

1.首先我在入口main.js里面聲明了一個全局變量（當然你可以按照自己的方式去聲明一個變量）

global.beforeRouteName = '';

2.然后在D組件中，聲明路由守衛(wèi)：beforeRouteEnter,代碼如下：

剛進入該組件時，便會進入beforeRouteEnter,在此先賦值：

beforeRouteEnter(to,from,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頁面（這個隨意設(shè)置，一般不會有這種情況） } }

最后一定不要忘記：在destroyed要取消監(jiān)聽，不然這個監(jiān)聽一直存在，代碼如下：

destroyed(){ window.removeEventListener(’popstate’,this.goBack,false);}

到此需求4就解決了。

剛剛看了下代碼，其實路由守衛(wèi)做這個返回控制其實更簡單。只要好好使用beforeRouteLeave這個守衛(wèi)就能簡單解決以上問題

補充知識：vue 使用路由守衛(wèi)監(jiān)聽返回鍵，控制頁面跳轉(zhuǎn)

我就廢話不多說了，大家還是直接看代碼吧~

beforeRouteLeave(to, from, next) { // 導航離開該組件的對應(yīng)路由時調(diào)用 // 可以訪問組件實例 `this` if(!this.isPublish){ this.confirmVisible=true next(false)//不放行 }else { next() } },

以上這篇vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。