Vue RouterとVue.jsでルートジャンプ記録機能を実装する方法

ルーティングは、Vue.js を使用して Web アプリケーションを開発する場合の重要な概念です。 Vue Router は Vue.js の公式ルーター ライブラリであり、URL を通じてアプリケーションのナビゲーションを制御できるようになります。 Vue Router は、ナビゲーション、パラメーターの受け渡し、ルーティング ステータスなど、アプリケーションのルーティングを管理するための API セットを提供します。しかし、実際の開発では、ユーザーがどのページを訪問したか、ページ内のユーザーのスクロール位置などを記録するなど、ユーザーのルーティング ジャンプの記録をアプリケーションに記録する必要があることがよくあります。この記事では、Vue Router と Vue.js グローバルナビゲーションガードを使用して、ルートジャンプ記録機能を実装する方法を紹介します。

1. Vue Router を使用してルーティング ジャンプ履歴を記録する

Vue Router は、現在のルーティング ステータスを取得できるルーティング履歴オブジェクト (履歴) を提供します。プッシュ、置換、その他の方法で実現できます。ルーティング オブジェクトのイベントをリッスンすることで、ルーティング ジャンプ履歴を記録できます。たとえば、ルーティング オブジェクトの beforeEach メソッドでルーティング ジャンプ履歴を記録できます。サンプル コードは次のとおりです:

const router = new VueRouter({
  routes: [
    // 路由定义
  ]
});

router.beforeEach((to, from, next) => {
  // to 和 from 都是路由对象
  // 记录路由跳转历史
  // ...
  next();
});

上記のコードでは、 beforeEach メソッドは Router が提供する Vue グローバル ナビゲーション ガード関数であり、ルートがジャンプする前に呼び出されます。このメソッドでは、ユーザーのルーティング ジャンプ履歴を記録できます。サンプル コードでは、to パラメーターと from パラメーターを使用して現在のルーティング オブジェクトと前のルーティング オブジェクトを取得し、それらを配列に記録するか、ローカルに保存できます。 (ローカル ストレージ) 後続のクエリ用。

2. Vue.js グローバル ナビゲーション ガードを使用してルート ジャンプを記録する

Vue Router でルート ジャンプ履歴を記録することに加えて、Vue.js を使用して、ルートジャンプの記録には、グローバルナビゲーションガード機能を利用しています。 Vue.js は、beforeEach、beforeResolve、afterEach という 3 つのグローバル ナビゲーション ガード関数を提供します。これらはそれぞれルート ジャンプ前、ルート解決前、ルート ジャンプ後に呼び出されます。これらのナビゲーション ガード関数ではルート ジャンプの履歴を記録できますサンプル コードは次のとおりです:

const router = new VueRouter({
  routes: [
    // 路由定义
  ]
});

router.beforeEach((to, from, next) => {
  // 记录路由跳转历史
  // ...
  next();
});

Vue.mixin({
  beforeRouteLeave (to, from, next) {
    // 记录路由跳转历史
    // ...
    next();
  }
});

上記のコードでは、Vue.mixin メソッドを使用して、Vue コンポーネントにグローバル ナビゲーション ガード関数を追加しています。 beforeRouteLeave 関数では、ユーザーのルート ジャンプ履歴を記録できます。この関数は、コンポーネントが現在のルートから離脱しようとしているときに呼び出されます。ルート ジャンプ履歴をアレイまたはローカル ストレージに記録できます。

概要:

この記事では、Vue Router と Vue.js グローバル ナビゲーション ガードを使用してユーザーのルート ジャンプ履歴を記録する方法を紹介します。実際の開発では、ユーザーのアクセス履歴を記録する場合は Vue Router を使用し、一部のユーザーのジャンプを記録する場合は Vue.js グローバル ナビゲーション ガードを使用するなど、必要に応じてルーティング ジャンプ履歴を記録する方法を選択できます。特別なイベント、歴史に目を向けましょう。ルーティング ジャンプ ヒストリーは一般的な要件であり、実装する場合は、パフォーマンスの問題やストレージ容量などの問題に注意する必要があります。

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