vue重復路由報錯解決

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation…
分為三種解決方式

1.捕獲異常

在項目的src\router\index.js全局設置捕獲路由引起的異常

//屏蔽重復路由警告 const VueRouterPush = router.push router.push = function push(to) {undefinedreturn VueRouterPush.call(this, to).catch(err => err) }export default router

也可以在具體方法中實際this.$router.push()時單獨設置捕獲異常

this.$router.push('路徑').catch(err => err)

2.判斷路由再跳轉

if(this.$route.path !== '路徑'){this.$router.push('路徑');}

3.中轉至空白頁replace()

先創建一個空白頁BlankPage.vue并配置相應的路由
在項目的src\main.js中定義全局跳轉方法

//全局刷新頁面方法 Vue.prototype.$routeTo= function (targetRoutePath) {this.$router.push({path: '/BlankPage',query: {routerPath: targetRoutePath,}}) }

在BlankPage.vue中設置路由替換

created() {let routerPath = this.$route.query.routerPaththis.$router.replace(routerPath)}

將方法中原先的路由跳轉改為全局跳轉方法即可
this.$router.push('路徑');修改為this.$routeTo('路徑')

拓展

使用空白頁中轉可以實現簡單的頁面刷新效果（路由指向自身頁面），這種刷新頁面不會全部重新加載，體驗較好

如果想要帶參數空白頁中轉路由，可以把上面的方法稍加修改
步驟
先創建一個空白頁BlankPage.vue并配置相應的路由

//全局刷新頁面方法 Vue.prototype.$routeTo= function (targetRoutePath，res) {this.$router.push({path: '/BlankPage',query: {routerPath: targetRoutePath,res:res}}) }

res用于存儲跳轉時傳參
在BlankPage.vue中設置路由替換

created() {let routerPath = this.$route.query.routerPathlet res=this.$route.query.resthis.$router.replace({path:routerPath,query:{res:res}})}

將方法中原先的路由跳轉改為全局跳轉方法即可
將

this.$router.push({path:'路徑',query:{參數1:值1,參數2:值2,參數3:值3,……} });

修改為

this.$routeTo('路徑',{參數1:值1,參數2:值2,參數3:值3,……} });

在目標頁接收參數

let 參數1 = this.$route.query.res.參數1 let 參數2 = this.$route.query.res.參數2 let 參數3 = this.$route.query.res.參數3 …

修改后的跳轉方法也可以不傳參跳轉，即this.$routeTo('路徑')

總結

以上是生活随笔為你收集整理的vue重复路由报错解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。