こうしたログイン検証として、ルーティングする前に、いくつかの検証を行うためのジャンプは普遍的な需要サイトです。
この点において、ナビゲーションによって提供beforeRouteUpdate VUE経路を容易にガード（ナビゲーションガード）を達成することができます。
ガード・ナビゲーション（ナビ・ガード）の名前は、それは奇妙に聞こえるが、これは翻訳された公式文書であるため、その暫定的にそれを呼び出します。
ます。https：//router.vuejs.org/zh-cn/advanced/navigation-guards.html文書アドレスを貼り付け
グローバル・ガード
あなたは使用することができ router.beforeEach 、登録グローバル前ガードを：
CONSTルータ=新しいVueRouter（{...}）
router.beforeEach（（、隣から）=> {
// ...
}）
ナビゲーションがトリガされたときにグローバルフロントガードは、作成順に呼び出します。ガードが分析され、非同期で実行され、今回のナビゲーションは、すべてのガードが完全に解決されるまで待機してきました。
それぞれの方法には、3つの警備員のパラメータを受け取ります。
-
to: Route：についての目標入力する ルートオブジェクトを -
from: Route：現在のナビゲーションルートを残すことを約ありました -
next: Function：このフックを解決するために、このメソッドを呼び出してください。結果の実装は依存next呼び出しパラメータ方法。-
next()：次のフックのパイプライン。すべてのフックがいずれかの終了した場合は、ナビゲーションの状態が確認された（認知）されます。 -
next(false)：現在のナビゲーション割り込み。ブラウザのURLは、（ユーザによって手動で、またはブラウザバックボタンであってもよい）変更された場合、URLアドレスにリセットされfromた経路に対応するアドレス。 -
next('/')またはnext({ path: '/' })：別のアドレスに移動します。現在のナビゲーションは、その後、新しいナビゲーションを中断しています。 -
next(error)：受信した場合（2.4.0+）nextパラメータがあるError場合、ナビゲーションが終了すると、エラーがに渡されるrouter.onError()登録済みのコールバック。
-
呼び出していることを確認してください next 方法を、それ以外の場合はフックが解決されません。
次の書き込みの例：
- ログイン状態「ルートセット」を決定する必要が含まれている場合、ルートセットにジャンプ、「未登録」の状態であれば、ログインページにLoginPageジャンプ。
- ログインページLoginPageに直接アクセスするには、「ログインステータス」場合は、ホームページのホームページに行くとき。
「表示」からインポートビュー。
「VUE-ルータ」からインポートルータ。
「@ /ページ/ログイン」からインポートLoginPage。
「@ /ページ/ホーム」からのインポートホームページ。
「@ /ページ/良い-リスト」からインポートGoodsListPage。
「@ /ページ/良い-詳細」からインポートGoodsDetailPage。
「@ /ページ/カート」からインポートCartPage。
「@ /ページ/プロフィール」からインポートProfilePage。
Vue.use（ルーター）
constのルータ=新しいルータ（{
ルート：[
{
パス：「/」、//デフォルトルートへ
リダイレクト：「/ホーム」//リダイレクト
}、
{
パス： '/ログイン'、
名前：「ログイン」、
コンポーネント：LoginPage
}、
{
パス：「/ホーム」
名前：「ホーム」、
コンポーネント：ホームページ
}、
{
パス： '/良い-list' の、
名前：「グッドリスト」
コンポーネント：GoodsListPage
}、
{
パス：「/良い詳細」
名前：「グッド詳細」
コンポーネント：GoodsDetailPage
}、
{
パス：「/カート」
名前：「カート」、
コンポーネント：CartPage
}、
{
パス：「/プロファイル」
名前：「プロファイル」、
コンポーネント：ProfilePage
}、
{
パス「**」、//誤ってルーティング
リダイレクト：「/ホーム」//リダイレクト
}、
]
}）;
//グローバルルーティングガード
router.beforeEach（（、隣から）=> {
console.log（ 'ナビゲーション-ガード'）;
//へ：ルート：ルートターゲットオブジェクトが入ることについてです
//から：ルート：現在のルートのナビゲーションが出ようとしました
//次：機能：このフックを解決するために、このメソッドを呼び出してください。結果の実装は、次のメソッド呼び出しのパラメータに依存しています。
constのnextRoute = [ '家'、 '良いリスト'、 '良い詳細'、 'カート'、 'プロフィール'];
isLogin = global.isLoginせ; //はログに記録されます
//未登録状態; nextRoute指定されたページにルーティングされたときに、ログインに行きます
IF（nextRoute.indexOf（to.name）> = 0）{
（もし！isLogin）{
console.log（ '何だ一体'）;
router.push（{名： 'ログイン'}）
}
}
//すでにログインして、ログインにルーティングされたときに、家へジャンプ
もし（to.name === 'ログイン'）{
IF（isLogin）{
router.push（{名： 'ホーム'}）;
}
}
次（）;
}）;
デフォルトルータをエクスポートします。
。