vue重復(fù)路由報錯解決

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

1.捕獲異常

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

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

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

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

2.判斷路由再跳轉(zhuǎn)

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

3.中轉(zhuǎn)至空白頁replace()

先創(chuàng)建一個空白頁BlankPage.vue并配置相應(yīng)的路由
在項目的src\main.js中定義全局跳轉(zhuǎn)方法

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

在BlankPage.vue中設(shè)置路由替換

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

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

拓展

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

如果想要帶參數(shù)空白頁中轉(zhuǎn)路由，可以把上面的方法稍加修改
步驟
先創(chuàng)建一個空白頁BlankPage.vue并配置相應(yīng)的路由

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

res用于存儲跳轉(zhuǎn)時傳參
在BlankPage.vue中設(shè)置路由替換

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

將方法中原先的路由跳轉(zhuǎn)改為全局跳轉(zhuǎn)方法即可
將

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

修改為

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

在目標頁接收參數(shù)

let 參數(shù)1 = this.$route.query.res.參數(shù)1 let 參數(shù)2 = this.$route.query.res.參數(shù)2 let 參數(shù)3 = this.$route.query.res.參數(shù)3 …

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。