Vue跳轉相同路由報錯

大家使用Vue做開發的時候應該都遇到過這個問題，就是某個頁面下調用this.$router.push(path)，而path指向的頁面和當前頁面是同一頁面時，就會發生報錯，vue-router會提示你避免跳轉到當前頁面，報錯如下：

 

一般情況我們可以在調用this.$router.push之前判斷一下，當前頁面與path的關系，如果path指向當前頁面，就不調用該方法，代碼如下：

// 獲取當前頁面路徑
let curPath = this.$route.fullPath;

// 判斷下當前路由是否就是要跳轉的路由
if (curPath.includes(path)) return;

this.$router.push(path);

 

上述做法沒有毛病，一般可以解決問題，但是只能在此次調用this.$router.push方法時有效，如果在其他地方也要調用這個方法，就要再寫一遍，所以有沒有一個一勞永逸的方法呢？

答案是：有滴~

我們可以把這個邏輯放到全局去，如在router/index.js頁面，可以這么寫：

// 實例化vue-router對象
const router = new VueRouter({
    routes: [
        // ...
    ]
})

/** 解決跳轉重復路由報錯問題 */ 
const routerPush = router.push;
router.push = path => {
  // 判斷下當前路由是否就是要跳轉的路由
  if (router.currentRoute.fullPath.includes(path)) return;
  return routerPush.call(router, path);
}

export default router

以上代碼其實是利用“函數劫持”實現的，首先用一個變量將router.push方法緩起來，然后重新定義router的push方法，在方法里面判斷一下是否真的要調用push，如果不需要就直接返回。（實際上push方法是定義在VueRouter.prototype上的，所以一開始拿到的router.push實際上是VueRouter.prototype對象上的push，所以也不是在router上重新定義push方法，而是直接添加push方法。）

 

完。