vue重复点击路由报错,解决NavigationDuplicated: Avoided redundant navigation to current location: 问题
生活随笔
收集整理的這篇文章主要介紹了
vue重复点击路由报错,解决NavigationDuplicated: Avoided redundant navigation to current location: 问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue項目中重復加載當前路由會報錯,
?解決方法:找到項目中的router文件,在里面添加代碼,修正Vue原型上的push和replace方法
(注意vue-router的引入名稱)
// 緩存原型上的push函數 const originPush = Router.prototype.push const originReplace = Router.prototype.replace // 給原型對象上的push指定新函數函數 Router.prototype.push = function (location, onComplete, onAbort) {// 判斷如果沒有指定回調函數, 通過call調用源函數并使用catch來處理錯誤if (onComplete===undefined && onAbort===undefined) {return originPush.call(this, location, onComplete, onAbort).catch(() => {})} else { // 如果有指定任意回調函數, 通過call調用源push函數處理originPush.call(this, location, onComplete, onAbort)} }// replace函數 Router.prototype.replace = function (location, onComplete, onAbort) {if (onComplete===undefined && onAbort===undefined) {return originReplace.call(this, location, onComplete, onAbort).catch(() => {})} else {originReplace.call(this, location, onComplete, onAbort)} }可以按需添加,當時我遇到這個問題按照百度上搜索的辦法沒有解決的原因是因為我項目中用的是replace方法,可是百度上都是修改push方法,導致不生效,現在列出兩種push和replace方法的修改代碼,看自己用的是哪種方法,按需添加就生效了
總結
以上是生活随笔為你收集整理的vue重复点击路由报错,解决NavigationDuplicated: Avoided redundant navigation to current location: 问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 程序员的浪漫------下雪氛围圣诞树源
- 下一篇: python qrcode 中文乱码_P