在編程式導航跳轉時候，連續點擊多次會報NavigationDuplicated錯誤

this.$router.push({name: "search"});

出現這種錯誤原因是因為vue-router引入了promise,當我們使用this.$router.push時候需要多添加成功或失敗的回調，否則就會報出以上的錯誤。

這時如果我們加入成功和失敗的回調，就不會報錯：

this.$router.push({ name: "search" },//成功回調() => {},//失敗回調() => {});

雖然解決了報錯，但如果有多個路由跳轉，這樣每次都要在后面加兩個回調函數，顯得很繁瑣，所以我們可以用另一個辦法，一次性解決問題。

我們在引入vue-router所在文件下重寫push和replace方法：

import VueRouter from 'vue-router'; //保存原型對象的Push let originPush = VueRouter.prototype.push let originReplace = VueRouter.prototype.replace //重寫push方法 VueRouter.prototype.push = function (location, res, rej) {if (res && rej) {originPush.call(this, location, res, rej)}else {originPush.call(this, location, () => { }, () => { })}} //重寫replace方法 VueRouter.prototype.replace = function (location, res, rej) {if (res && rej) {originReplace.call(this, location, res, rej)}else {originReplace.call(this, location, () => { }, () => { })}}

?至此我們成功解決問題，

總結

以上是生活随笔為你收集整理的vue router连续点击多次路由报错的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。