Vue Router でジャンプキャンセル履歴を実装する方法

Vue は、Web アプリケーションの開発で広く使用されている人気のある JavaScript フレームワークです。 Vue Router は Vue の公式ルーター ライブラリであり、シングルページ アプリケーションを構築する場合に非常に役立ちます。 Vue Router を使用すると、開発者はアプリケーションの状態とナビゲーションを簡単に管理できます。 Vue Router は、開発者がコード ベースをより適切に管理できるようにする動的ルーティングやネストされたルーティングなどの機能も提供します。

Vue Router を使用する場合、非常に一般的な要件は、電子商取引 Web サイトなどのシナリオでページ ジャンプを実装することです。この場合、ユーザーは何らかの操作を行った後、別のページにジャンプします。しかし、このジャンプ方法はユーザーに何らかのトラブルを引き起こす可能性があります。たとえば、ユーザーが前のページに戻ると、クリックした商品が再読み込みされます。これはユーザーに混乱や迷惑をもたらす可能性があります。したがって、ジャンプ履歴をキャンセルするのが良い解決策です。

それでは、Vue Router でジャンプキャンセル履歴を実装するにはどうすればよいでしょうか?以下に、いくつかの解決策を紹介します。

方法 1: Vue Router の replace メソッドを使用する

Vue Router を使用すると、開発者はデフォルトのプッシュ メソッドの代わりに replace メソッドを使用してルーティングを変更できます。この方法で履歴をキャンセルすることができます。

これは例です:

router.replace('/path-to-url');

このメソッドは、ブラウザ履歴に新しいエントリを作成せずに、現在のルートを指定されたパスに置き換えます。これは、ユーザーが前のページに戻ることができないことを意味し、戻ったときにページがリロードされる問題を解決します。

方法 2: Vue Router の beforeRouteLeave メソッドとscrollBehavior メソッドを使用する

Vue Router には、beforeRouteLeave メソッドとscrollBehavior メソッドの 2 つが用意されており、これらのメソッドを組み合わせて使用​​して、キャンセル履歴を実装できます。

beforeRouteLeave メソッドは、Vue Router のライフサイクル フックであり、コンポーネントがルートから離れるときにトリガーされます。したがって、これを使用してデフォルトのルーティング動作をオーバーライドできます。 beforeRouteLeave メソッドでは、scrollBehavior メソッドを使用して、scrollBehavior オブジェクトを通じてブラウザが履歴モードに戻ることができるかどうかを設定できます。 'scrollBehavior' プロパティが、scrollBehavior メソッドで返されるオブジェクトに設定されている場合、履歴モードでブラウザの戻るボタンがクリックされたときに、対応するスクロール動作が実行されます。

次は例です:

beforeRouteLeave(to, from, next) {
  this.$router.replace(to.path)
  next(false);
},
scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

この例では、beforeRouteLeave メソッドを使用してデフォルトのルーティング動作をオーバーライドし、this.$router.replace メソッドを使用してデフォルトのプッシュ動作を置き換えます。方法 。この代替方法では、履歴に新しいエントリが追加されないため、ユーザーがバックオフしたときにページがリロードされなくなります。ブラウザがロールバックできるかどうかを設定するには、scrollBehavior メソッドを使用します。

方法 3: Vue Router の履歴モードを使用する

Vue Router には、履歴レコードをキャンセルするために使用できる履歴モードも用意されています。

以下は例です:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

この例では、Vue Router のモードを履歴に設定します。このモードは HTML5 履歴 API に基づいており、アドレス バーのクエリ文字列ではなくブラウザの履歴オブジェクトにルーティング情報を保存します。つまり、履歴モードでは、ユーザーは履歴の問題を気にすることなく、アドレス バーに URL を直接入力および変更できます。

概要

Vue Router は Vue が公式に提供するルーター ライブラリで、非常に便利な機能がいくつかあります。ページ ジャンプの実装に関しては、ジャンプ履歴をキャンセルすることが非常に重要な要件です。この記事ではジャンプ履歴をキャンセルする3つの方法を紹介します。これらの方法を使用すると、開発者はアプリケーションの状態とナビゲーションをより適切に管理し、ユーザー エクスペリエンスを向上させることができます。

以上がVue Router でジャンプキャンセル履歴を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。