?? 場(chǎng)景描述
在頁面中，經(jīng)常會(huì)帶有“返回”按鈕。對(duì)于這些返回功能的實(shí)現(xiàn)，可能會(huì)有以下兩種常見的處理方式：
調(diào)用加載歷史棧的前一個(gè)地址的API，例如vue-router提供的router.back()，如下代碼所示。
back(){
this.$router.back()
} 但這種實(shí)現(xiàn)方式存在的問題是：如果用戶是直接在瀏覽器地址欄輸入`URL`進(jìn)入該頁面，當(dāng)用戶點(diǎn)擊返回按鈕時(shí)，會(huì)因?yàn)闅v史棧只存在當(dāng)前地址而無跳
- 直接跳轉(zhuǎn)到一個(gè)寫死的對(duì)應(yīng)上一個(gè)頁面的地址，如下代碼所示。
back(){
// 跳轉(zhuǎn)到該地址上一級(jí)的頁面
this.$router.push('/xxx')
} 但這種寫法存在的問題，如果該頁面可以被多個(gè)不同地址的頁面跳轉(zhuǎn)進(jìn)入訪問。則當(dāng)點(diǎn)擊返回時(shí)，就有可能返回不到用戶之前訪問的頁面。
舉一個(gè)常見的場(chǎng)景：如果用戶處于_表格頁面_，其URL為/table?current=3，current代表表格分頁頁碼。當(dāng)用戶點(diǎn)擊查閱表格中一個(gè)條目而進(jìn)入_詳情頁面_，然后再試圖通過點(diǎn)擊_詳情頁面_的返回按鈕回到剛剛訪問的表格頁面時(shí)，如果開發(fā)者寫死了返回地址為/table，表格會(huì)因?yàn)閏urrent的缺失而呈現(xiàn)第 1 頁的數(shù)據(jù)，和用戶想繼續(xù)查看第 3 頁的數(shù)據(jù)的行為預(yù)期不一致，從而影響用戶的體驗(yàn)。
那么，有沒有一種方法可以完美解決上述的情況呢。
?? 思路分析
解決思路其實(shí)很簡(jiǎn)單：在每次返回時(shí)，看一下歷史棧是否存在前一個(gè)地址，如果有直接調(diào)用back()之類的API，如果沒有，則直接跳轉(zhuǎn)到寫死的對(duì)應(yīng)上一個(gè)頁面即可，如下所示：
back() {
// 通過hasBackHistory布爾量來判斷歷史棧是否存在前一個(gè)地址
if (this.hasBackHistory) {
this.$router.back();
} else {
this.$router.push('xxx');
}
}
那么問題是，如何知道歷史棧是否存在前一個(gè)地址呢？只要同時(shí)符合以下兩種條件都可以判斷存在前一個(gè)地址：
- 存在前一個(gè)路由：無論是vue-router還是react-router，都會(huì)生成一個(gè)初始路由，我們可以通過判斷當(dāng)前路由下的前一個(gè)路由是否等于初始路由
- **瀏覽器的導(dǎo)航行為類型為push：如果是replace和pop（即go、back或者瀏覽器前進(jìn)后退按鈕導(dǎo)致的路由變動(dòng)**），其前一個(gè)路由雖然會(huì)被vue-router和react-router記錄，但本質(zhì)上是不可以跳轉(zhuǎn)的過去的。
由于vue-router和react-router的設(shè)計(jì)和提供的API不一樣，因此對(duì)于上述思路的實(shí)現(xiàn)方式都不一樣。下面的解決方案中會(huì)分vue和react兩種場(chǎng)景去分析如何得知歷史棧是否存在前一個(gè)地址。
?? 解決方案
?? 在 Vue 項(xiàng)目中如何實(shí)現(xiàn)
適用的依賴版本為：
- vue: 2.6以上
- vue-router：3.6以上
在vue中可以直接借用vue-router提供的beforeRouteEnter來處理。實(shí)現(xiàn)步驟如下所示：
- 由于Vue-Router沒有提供可以判斷導(dǎo)航行為類型的API，因此只能在Vue-Router通過hack來記錄導(dǎo)航行為類型，如下所示：
const originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function () {
this.currentNavigateType = "push"; return originPush.apply(this, [...arguments]);
};const originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function () {
this.currentNavigateType = "replace"; return originReplace.apply(this, [...arguments]);
};const originGo = VueRouter.prototype.go;
VueRouter.prototype.go = function () {
this.currentNavigateType = "go"; return originGo.apply(this, [...arguments]);
}; 在beforeRouteEnter路由守衛(wèi)函數(shù)中獲取前一個(gè)路由，然后對(duì)之前說的兩種條件進(jìn)行判斷，如下所示：
微信登錄/注冊(cè)
![]()
切換手機(jī)號(hào)登錄
{{ bind_phone ? '綁定手機(jī)' : '手機(jī)登錄'}}
![]()
{{codeText}}
登錄
切換微信登錄/注冊(cè)
暫不綁定
