Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)如何解決

這篇文章主要介紹“Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)如何解決”，在日常操作中，相信很多人在Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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é)果，但最好還是處理一下。

局部處理

局部處理是指對單個(gè)路由進(jìn)行處理，其他的路由依舊報(bào)錯(cuò)。

在路由跳轉(zhuǎn)的push語句中添加catch捕捉錯(cuò)誤

所以原來的路由跳轉(zhuǎn)改為以下代碼：

		toecharts(){
            this.$router.push({
                    path:'/echarts'
                }
            ).catch(err => {})		//添加catch捕捉錯(cuò)誤
        }

全局處理

全局處理是指對所有路由進(jìn)行處理。

在main.js文件添加以下代碼（代碼直接復(fù)制就好，無需改動(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è)問題，不然也可能會(huì)影響調(diào)試其他問題。

報(bào)錯(cuò)原因

vue-router在3.0版本以上時(shí) ，回調(diào)形式改成了promise api，返回的是promise，如果沒有捕獲到錯(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)使用路由插件之前插入如下代碼

//獲取原型對象上的push函數(shù)
const originalPush = Router.prototype.push
//修改原型對象中的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) 
})

到此，關(guān)于“Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)如何解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！