Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問題及解決
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語句中添加catch捕捉錯(cuò)誤
所以原來的路由跳轉(zhuǎn)改為以下代碼：
toecharts(){
this.$router.push({
path:'/echarts'
}
).catch(err => {}) //添加catch捕捉錯(cuò)誤
}
全局處理
全局處理是指對(duì)所有路由進(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)使用路由插件之前插入如下代碼
//獲取原型對(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實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能
在項(xiàng)目開發(fā)中遇到這樣需求，就是有幾個(gè)tab欄，每個(gè)tab欄對(duì)應(yīng)的ajax請(qǐng)求不一樣，內(nèi)容區(qū)域一樣，內(nèi)容為實(shí)時(shí)刷新數(shù)據(jù)，實(shí)現(xiàn)方法其實(shí)很簡(jiǎn)單的，下面小編給大家?guī)砹嘶赩ue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能，需要的朋友參考下吧2017-04-04
vue項(xiàng)目中使用this.$confirm解析
這篇文章主要介紹了vue項(xiàng)目中使用this.$confirm方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在 Typescript 中使用可被復(fù)用的 Vue Mixin功能
這篇文章主要介紹了在 Typescript 中使用可被復(fù)用的 Vue Mixin功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
如何解決element-ui動(dòng)態(tài)加載級(jí)聯(lián)選擇器默認(rèn)選中問題
這篇文章主要介紹了如何解決element-ui動(dòng)態(tài)加載級(jí)聯(lián)選擇器默認(rèn)選中問題，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家分享一篇vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
Vue實(shí)現(xiàn)計(jì)數(shù)器案例
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)數(shù)器案例的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
因?yàn)関ue的響應(yīng)式是通過 Object.defineProperty 來實(shí)現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06