vue 路由如何回退指定頁面

今天做了乙個 vue 專案關於路由場景的問題，路由如何回退指定頁面，在此做個記錄。

一般頁面跳轉記錄 a => b，想從 b 退回 a

this.$router.go(-1)

如果頁面跳轉記錄 a => b => c，想從 c 一步退回 a

this.$router.go(-2)

如果頁面跳轉記錄 a => b => c => b，頁面的堆疊記錄為 a => b

b 頁面：
this.$router.replace();

跟維護佇列一樣，後進先出就行了

那如果是 a => b => c => d，變成路由佇列 a => b => e 呢？

乙個簡單場景：商品列表頁 => 商品詳情頁 => 註冊賬號 => 填寫資料 => 訂單頁

在訂單頁確定後，退回到商品詳情頁才是最好的流程。

這裡我用的是 vue-router 的 beforeenter 實現

1.在訂單頁回到商品詳情頁

this.$router.go(-3)

2.在商品詳情頁進入到訂單頁

在後退操作後面使用 this.$router.replace 無效果，settimeout 後使用頁面會閃現，所以改用 beforeenter

在商品詳情頁路由判斷如何從填寫資料進來的，就進入到訂單頁，不載入商品詳情頁

name: '商品詳情頁',
path: '/***',
component: ***,
beforeenter:(to, from, next) => )
}	next()
}

Vue 阻止頁面回退

1.原生js方法 2.vue中結合vuex方法 1.在路由配置中給這個路由新增meta資訊，比如 2.在全域性的router.beforeeach 函式裡面獲取allowback的狀態，同時更新vuex的allowback的值，let allowback true 給個預設值true if to.m...

Vue 阻止頁面回退

Vue 頁面路由

首先，以在vscode搭建的專案為例，會看到以下目錄根據路徑src router index.js，找到增加頁面路由的index.js檔案，對應下圖中的寫法進行路由設定 import vue from vue import router from vue router import hellowo...

vue 路由如何回退指定頁面

Vue 阻止頁面回退

Vue 阻止頁面回退

Vue 頁面路由

相關推薦