今回は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 つのパラメータを受け取ります:
to: Route: 進入しようとしているターゲットルートオブジェクト
from: Route: 現在のナビゲーションが出発しようとしているルート
next:機能: 特定 このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は、次のメソッドの呼び出しパラメータによって異なります。
next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションの ステータス が確認されます。
next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更された場合 (おそらくユーザーが手動で、またはブラウザの戻るボタン によって)、URL アドレスは from ルートに対応するアドレスにリセットされます。
以下に例を書きます:
1. ログイン状態を判断する必要がある「ルーティング コレクション」をリストします。コレクション内のルートにジャンプするときに、「ログイン状態ではない」場合は、ログイン ページ LoginPage にジャンプします。 ;2. ログインページ LoginPage に直接アクセスすると、「ログイン済み」の場合は、ホーム ページ HomePage にジャンプします。この記事の事例を読んだ後は、この方法を習得したと思います。興味深い情報です。php 中国語 Web サイトの他の関連記事にもご注目ください。 推奨読書:
Vue で文字列テンプレートを使用する方法
Bison による Mac インストールの節約エラーに対処する方法
以上がvue2.0でのルーティングガードの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。