vueプロジェクトVue-routerレポートNavigationDuplicated:「Navigating to current location(")is not allowed」の問題を解決
3551 ワード
問題の原因
その理由はVue-routerが3.1以降に$routerをPush()メソッドをPromiseに変更します.したがって,コールバック関数がなければ,エラー情報はグローバルなルーティングエラー処理に渡されるため,上記のエラーが報告される.
vue-routerは、Uncaught(in promise)のエラー(pushにコールバックなし)を先に報告し、NavigationDuplicatedのエラー(ルーティングエラー、グローバルエラー処理印刷しました.
ソリューション
シナリオ1ルーティングのpushメソッドを書き換える:
これは大部分の人が提供した案ですが、本人の試みで効果がない項目があることがわかりました.
シナリオ2(暴力)
$routerごとにpushはコールバック関数を増やして、ちょっと面倒ですが、役に立ちましょう!!いい香りですね~!
その理由はVue-routerが3.1以降に$routerをPush()メソッドをPromiseに変更します.したがって,コールバック関数がなければ,エラー情報はグローバルなルーティングエラー処理に渡されるため,上記のエラーが報告される.
vue-routerは、Uncaught(in promise)のエラー(pushにコールバックなし)を先に報告し、NavigationDuplicatedのエラー(ルーティングエラー、グローバルエラー処理印刷しました.
ソリューション
シナリオ1ルーティングのpushメソッドを書き換える:
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
これは大部分の人が提供した案ですが、本人の試みで効果がない項目があることがわかりました.
シナリオ2(暴力)
this.$router.push('/').catch(err => {err})
this.$router.replace('/').catch(err => {err})
$routerごとにpushはコールバック関数を増やして、ちょっと面倒ですが、役に立ちましょう!!いい香りですね~!