當我們使用編程式路由導航跳轉路徑時,如果我們兩次攜帶同樣的參數進行跳轉,會進行頁面報錯:
那產生這個問題的原因是什么呢?
我們接收并輸出調用push方法返回的結果:
會發現這是一個Promise對象?
我們都知道,我們在使用一個Promise對象是時候需要配置成功執行函數和失敗回調函數,
所以我們只需要在使用push方法的時候額外傳入一個成功回到函數和一個失敗回調函數即可。
但是使用這種方法治標不治本,難道我們每一次調用push和replace都要額外寫兩個回調函數嗎?
所以,為了書寫便捷,我們可以重寫push 方法和replace 方法:
首先我們需要搞清楚push方法在哪兒:
既然push方法是我們引入的vue-router中的方法,那么我們就去找創建$router 的實例對象
我們輸出一下引入的VueRouter構造函數,會發現在其prototype下的push方法和replace方法
那么我們就對VueRouter.prototype.push 和?VueRouter.prototype.replace 進行重寫。
在router 配置文件中編寫如下代碼即可:
// 引入router
import VueRouter from "vue-router";// 保存一份原來的push 和 replace 方法
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;// 重寫push方法
// push接受三個參數:配置項、成功回調函數、失敗回調函數
VueRouter.prototype.push = function (location, resolve, reject) {// 如果用戶自定義了成功回調函數和失敗回調函數if (resolve && reject) {// 直接調用原方法,并傳遞用戶配置的回調函數// 注意這里需要把originPush的指向改為VueRouter// 使用call方法能夠調用函數一次,傳遞參數使用逗號隔開;apply方法使用數組隔開originPush.call(this, location, resolve, reject);} else {// 如果用戶沒有自定義回調函數,那么我們手動傳入兩個空函數originPush.call(this, location, () => {}, () => {});}
};// 重寫replace方法
VueRouter.prototype.replace = function (location, resolve, reject) {if (resolve && reject) {originReplace.call(this, location, resolve, reject);} else {originReplace.call(this, location, () => {}, () => {});}
}