vueルーターのルーティングジャンプ方法を詳しく解説

Vue は、Vue Router を含む多くの便利な機能を提供する人気のある JavaScript フレームワークです。 Vue Router は、シングル ページ アプリケーション (シングル ページ アプリケーション) の作成に役立つ公式に推奨されるルーティング マネージャーです。 Vue Router にはさまざまなルートジャンプ方法が用意されており、この記事ではそれらの方法を紹介します。

1. ルーターリンクを介したルートジャンプ

Vue Router は、ジャンプリンクを実装するためのコンポーネントルーターリンクを提供します。コンポーネント属性に to を指定してターゲットルーティングを設定できます。

<router-link to="/home">Home</router-link>

上記のコードは、ルーティング アドレス /home のページにジャンプすることを示しています。

to 属性の値に変数を挿入して、動的ルーティングを実現することもできます。例:

<router-link :to="&#39;/user/&#39; + userId">User</router-link>

userId の値が変更されると、それに応じてジャンプ先も変更されます。

2. router.push によるルート ジャンプ

Vue Router には、ルート ジャンプを実装するためのグローバル メソッド router.push が用意されており、これをコンポーネントに渡すことができます。 router.push メソッドのコードは次のとおりです。

this.$router.push('/home')

上記のコードは、ルーティング アドレス /home を持つページにジャンプすることを示しています。

プッシュ メソッドでオブジェクトを渡して動的ルーティングを実装することもできます。例:

this.$router.push({ path: '/user', query: { userId: 123 }})

上記のコードは、ルーティング アドレス /user を持つページにジャンプし、URL にクエリ パラメータを含めることを意味します。

3. router.replace によるルート ジャンプ

Vue Router は、ルート ジャンプを実装するためのグローバル メソッド router.replace を提供します。router.push とは異なり、router.replace は終了しません。ジャンプ時の履歴記録。コードは次のとおりです。

this.$router.replace('/home')

push メソッドと同様に、replace メソッドにオブジェクトを渡して、ルートの動的なジャンプを実装できます。

4. router.go によるルート ジャンプ

Vue Router は、ルート ジャンプを実装するためのグローバル メソッド router.go を提供します。これは、ロールバックしたり、履歴のページを進めることができます。コードは次のとおりです。

this.$router.go(-1)

上記のコードは、ページをロールバックすることを意味します。

5. router.beforeEach によるルート ガードの実装

ルーティング ジャンプの前に一連の操作を実行する必要がある場合、Vue Router は beforeEach でルート ガードを提供します。

グローバル ルーティング設定で beforeEach 関数を定義できます。この関数は各ルート ジャンプの前に実行されます。コードは次のとおりです。

router.beforeEach((to, from, next) => {
  // ...
})

to パラメータは、ルーティング情報を表します。 Jumped、from パラメータは現在のページのルーティング情報を表し、next メソッドはルーティング ジャンプが完了したかどうか、またはジャンプ方法を通知するために使用されるコールバック関数です。

beforeEach 関数でユーザーの権限やログイン状態などを検証し、検証結果に基づいてジャンプするかブロックするかを決定できます。

6. router.afterEach を通じてルート ガードを実装する

beforeEach 関数に加えて、Vue Router はグローバル ルート ガード afterEach も提供します。これは、to と 2 つのパラメーターも受け取ります。違いは、afterEach 関数がルート ジャンプの完了後に実行されることです。

ページのステータスを更新したり、afterEach 関数で他の操作を実行したりできます。

上記は、Vue Router が提供するさまざまなルーティング ジャンプ方法です。それぞれ異なるシナリオに適しており、実際のニーズに応じて使用することができます。開発プロセス中に、ブラウザ コンソールで Vue Router のすべてのルーティング情報を表示できるため、デバッグや開発に非常に役立ちます。

以上がvueルーターのルーティングジャンプ方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。