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

php中世界最好的语言
リリース: 2018-05-29 10:25:03
オリジナル
4595 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート