vue2.0 を使用してナビゲーションガードを実装する方法-jsチュートリアル-php.cn

vue2.0 を使用してナビゲーションガードを実装する方法

php中世界最好的语言

リリース： 2018-05-28 14:37:39

オリジナル

1785 人が閲覧しました

今回は、vue2.0 を使用してナビゲーションガードを実装する方法と、vue2.0 を使用してナビゲーションガードを実装する際の注意事項について説明します。以下は実際的なケースです。

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

ドキュメントのアドレスを貼り付けます:

グローバルガード

router.beforeEach を使用して、グローバルプレGuard :

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

ログイン後にコピー

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

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

to: Route: 進入しようとしているターゲットルート

オブジェクト

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

next: Function:このメソッドはこのフックを解決します。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

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

next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更された場合 (おそらくユーザーが手動で、またはブラウザの戻るボタン

によって)、URL アドレスは from ルートに対応するアドレスにリセットされます。 next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

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

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

以下に例を書きます:

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

ログインページ LoginPage に直接入力すると、「ログイン済み」の場合は、ホームページ HomePage にジャンプします。この記事の事例を読んだ後、あなたは方法を習得したと思います。 php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

jQueryを使用してランダムな色を取得する方法

以上がvue2.0 を使用してナビゲーションガードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

vue2.0 を使用してナビゲーション ガードを実装する方法