在編程式導(dǎo)航跳轉(zhuǎn)時(shí)候，連續(xù)點(diǎn)擊多次會(huì)報(bào)NavigationDuplicated錯(cuò)誤

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

出現(xiàn)這種錯(cuò)誤原因是因?yàn)関ue-router引入了promise,當(dāng)我們使用this.$router.push時(shí)候需要多添加成功或失敗的回調(diào)，否則就會(huì)報(bào)出以上的錯(cuò)誤。

這時(shí)如果我們加入成功和失敗的回調(diào)，就不會(huì)報(bào)錯(cuò)：

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

雖然解決了報(bào)錯(cuò)，但如果有多個(gè)路由跳轉(zhuǎn)，這樣每次都要在后面加兩個(gè)回調(diào)函數(shù)，顯得很繁瑣，所以我們可以用另一個(gè)辦法，一次性解決問(wèn)題。

我們?cè)谝雟ue-router所在文件下重寫push和replace方法：

import VueRouter from 'vue-router'; //保存原型對(duì)象的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, () => { }, () => { })}}

?至此我們成功解決問(wèn)題，

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。