Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問(wèn)題及解決
vue路由重復(fù)點(diǎn)擊時(shí)會(huì)出現(xiàn)報(bào)錯(cuò)
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX
雖然不影響運(yùn)行結(jié)果，但最好還是處理一下。
局部處理
局部處理是指對(duì)單個(gè)路由進(jìn)行處理，其他的路由依舊報(bào)錯(cuò)。
在路由跳轉(zhuǎn)的push語(yǔ)句中添加catch捕捉錯(cuò)誤
所以原來(lái)的路由跳轉(zhuǎn)改為以下代碼：
toecharts(){
this.$router.push({
path:'/echarts'
}
).catch(err => {}) //添加catch捕捉錯(cuò)誤
}
全局處理
全局處理是指對(duì)所有路由進(jìn)行處理。
在main.js文件添加以下代碼（代碼直接復(fù)制就好，無(wú)需改動(dòng)）
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
vue 重復(fù)點(diǎn)擊菜單，路由重復(fù)報(bào)錯(cuò)解決
報(bào)錯(cuò)信息
vue-router在3.0版本以上時(shí)，重復(fù)點(diǎn)菜單，控制臺(tái)會(huì)報(bào)錯(cuò)，雖然不影響使用，但是最好處理下這個(gè)問(wèn)題，不然也可能會(huì)影響調(diào)試其他問(wèn)題。
報(bào)錯(cuò)原因
vue-router在3.0版本以上時(shí) ，回調(diào)形式改成了promise api，返回的是promise，如果沒(méi)有捕獲到錯(cuò)誤，控制臺(tái)始終會(huì)出現(xiàn)如上圖的報(bào)錯(cuò)
node_module/vue-router/dist/vue-router.js 搜VueRouter.prototype.push
解決方法
1.降低vue-router的版本
npm i vue-router@3.0 -S
2.在vue.use(Router)使用路由插件之前插入如下代碼
//獲取原型對(duì)象上的push函數(shù)
const originalPush = Router.prototype.push
//修改原型對(duì)象中的push方法
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
3.捕獲異常
// 捕獲router.push異常
this.$router.push(route).catch(err => {
console.log('輸出報(bào)錯(cuò)',err)
4.補(bǔ)齊router第三個(gè)參數(shù)
// 補(bǔ)齊router.push()的第三個(gè)參數(shù)
this.$router.push(route, () => {}, (e) => {
console.log('輸出報(bào)錯(cuò)',e)
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了vscode下的vue文件格式化問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
setup+ref+reactive實(shí)現(xiàn)vue3響應(yīng)式功能
這篇文章介紹了通過(guò)setup+ref+reactive實(shí)現(xiàn)vue3響應(yīng)式功能，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Vue中計(jì)算屬性未生效:原因、排查與解決過(guò)程
本文將深入探討計(jì)算屬性未生效的常見(jiàn)原因,并提供排查和解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
vuex vue簡(jiǎn)單使用知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了關(guān)于vuex vue簡(jiǎn)單使用知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以參考下。2019-08-08
vue.js 打包時(shí)出現(xiàn)空白頁(yè)和路徑錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了vue.js 打包時(shí)出現(xiàn)空白頁(yè)和路徑錯(cuò)誤問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了element 表格嵌套表單驗(yàn)證指定行的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目完整步驟
最近做項(xiàng)目結(jié)構(gòu)優(yōu)化,前端項(xiàng)目都是部署在nginx上,想實(shí)現(xiàn)同一個(gè)端口可以訪(fǎng)問(wèn)多個(gè)前端項(xiàng)目,所以就有了本文,這篇文章主要給大家介紹了關(guān)于Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-10-10
vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由，通過(guò)本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡(jiǎn)單，適合初學(xué)者,需要的朋友可以參考下2017-12-12