Vue-router は現在の場所 (/path) へのナビゲーションを許可しません。エラーの原因と修正

エラーメッセージ

現在の場所 ("/path") への移動は許可されていません

原因

コンソールに上記のメッセージNavigating to current location ("/path") is not allowedが表示される場合、同じルートが繰り返し入力されているためです。

エラーのデモンストレーション

エラーを示すために、 vue-cliを使用して新しいプロジェクトを再構築し、按鈕とinput 1 つずつだけ記述しました。
コード：

<!-- vue テンプレート コード -->
<div>
	<button @click="gotoHandle">ルートジャンプをテストする</button>
	<input v-model="ルート名">
<div>

// ルーティングコードエクスポートデフォルト{
  データ（） {
    戻る {
      ルート名: ''
    }
  },
  メソッド: {
    ハンドルへ移動() {
      this.$router.push({name: this.routeName})
    }
  }
}

アニメーションデモ

同じルートを繰り返し入力すると (パスまたはルート名のいずれかで)、現在の場所 ( path ) へのナビゲーションが許可されないことを示すプロンプトが表示されます。たとえば、上記の例では、 Aboutという名前のルートを入力すると、プロンプトはpath: "/about"となり、現在の場所 ("/about") へのナビゲーションは許可されません。これは、ジャンプ方法が間違っているとエラー処理がキャプチャされないため、エラー情報が直接出力されるためです。

回避策

方法1

エラーが報告される場所に直接.catch(error => error)を追加します。

エクスポートデフォルト{
  データ（） {
    戻る {
      ルート名: ''
    }
  },
  メソッド: {
    ハンドルへ移動() {
      this.$router.push({name: this.routeName}).catch(エラー => エラー)
    }
  }
}

方法2

エラーにジャンプするメソッドにグローバル エラー キャプチャを追加します。

'vue-router' から VueRouter をインポートします。

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = 関数 (場所) {
  routerPush.call(this, location).catch(error => error) を返します。
}

上記のコードは、 main.jsまたはrouter/index.jsで実行した場合、およびnew VueRouter前後で実行した場合と同じです。これはリセットされたVueRouterプロトタイプ オブジェクトのpushイベントであるため、プロトタイプ オブジェクトのpushイベントにキャプチャ例外が追加され、プロトタイプ チェーンを通じて関連するすべてのオブジェクトが変更されます。

replaceメソッドの重複ジャンプ エラーは上記と同様です。push push replace変更するだけです。

方法3

この方法をお勧めします。同じルートへの繰り返しジャンプを回避するために、ジャンプ ロジックを最適化することをお勧めします。

Vue-router が現在の場所 (/path) へのナビゲーションを許可しないエラーの原因と修正に関するこの記事はこれで終わりです。Vue-router の現在の場所へのナビゲーションに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。