四种解决Vue中重复点击相同路由控制台报错问题( Avoided redundant navigation to current location)
生活随笔
收集整理的這篇文章主要介紹了
四种解决Vue中重复点击相同路由控制台报错问题( Avoided redundant navigation to current location)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue-router 升級到3.1.x 后,重復點擊導航時,控制臺出現報錯 ,雖然不影響功能使用,但是看的就不舒服。
報錯信息
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location報錯原因
vue router ≥ v3.1 后 ,回調形式改成promise api了,返回的是promise,如果沒有捕獲到錯誤,控制臺始終會出現如上圖的警告。
解決方法
【方法一】降低版本
npm i vue-router@3.0 -S【方法二】在router文件夾下增加下列代碼
//嘗試了下不管用 const routerPush = Router.prototype.push Router.prototype.push = function push(location) {return routerPush.call(this, location).catch(error=> error) }【方法三】捕獲異常
// 捕獲router.push異常 this.$router.push(route).catch(err => {console.log('輸出報錯',err) })【方法四】補齊router第三個參數
// 補齊router.push()的第三個參數 this.$router.push(route, () => {}, (e) => {console.log('輸出報錯',e) })總結
以上是生活随笔為你收集整理的四种解决Vue中重复点击相同路由控制台报错问题( Avoided redundant navigation to current location)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2021 MCU WiFi竞争新格局,国
- 下一篇: Mongodb的Min key和Max