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

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

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

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

https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

グローバル ガード

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を使用してランダムな色を取得する方法

JSを使用して最も単純な検索、並べ替え、および重複排除アルゴリズムを実装する方法

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