vue2.0でのルーティングガードの使い方を詳しく解説

今回はvue2.0でルートガードを使用する方法について詳しく説明します。vue2.0でルートガードを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

ルーティングの前にログイン検証などの検証を行うことは、Web サイトでは一般的な要件です。

この点、vue-route が提供する beforeRouteUpdate では、navigationguards (navigation-guards) を簡単に実装できます。

navigation-guards という名前は奇妙に聞こえますが、公式ドキュメントではこのように翻訳されているため、そう呼ぶことにします。

ドキュメントのアドレスを貼り付けます: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

グローバル ガード

router.beforeEach を使用してグローバル ガードを登録できますガード 配置ガード:

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

ナビゲーションがトリガーされると、グローバル フロントエンド ガードが作成順に呼び出されます。ガードは非同期で解析および実行されます。現時点では、ナビゲーションはすべてのガードが解決されるまで待機します。

各ガードメソッドは 3 つのパラメータを受け取ります:

1. to: Route: 進入しようとしているターゲットルートオブジェクト

2. from: Route: 現在のナビゲーションが出発しようとしているルート

3. next:機能: 特定 このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

1. next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションの ステータス が確認されます。

2. next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更された場合 (おそらくユーザーが手動で、またはブラウザの戻るボタン によって)、URL アドレスは from ルートに対応するアドレスにリセットされます。

3. next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

4. next(error): (2.4.0+) next に渡されたパラメータが Error インスタンスの場合、ナビゲーションは終了し、エラーは router.onError() によって登録されたコールバックに渡されます。

必ず次のメソッドを呼び出してください。そうしないとフックが解決されません。

以下に例を書きます:

1. ログイン状態を判断する必要がある「ルーティング コレクション」をリストします。コレクション内のルートにジャンプするときに、「ログイン状態ではない」場合は、ログイン ページ LoginPage にジャンプします。 ;

2. ログインページ LoginPage に直接アクセスすると、「ログイン済み」の場合は、ホーム ページ HomePage にジャンプします。この記事の事例を読んだ後は、この方法を習得したと思います。興味深い情報です。php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

Vue で文字列テンプレートを使用する方法

Bison による Mac インストールの節約エラーに対処する方法

以上がvue2.0でのルーティングガードの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。