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メソッドを書き換える:
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はコールバック関数を増やして、ちょっと面倒ですが、役に立ちましょう!!いい香りですね~!