vue-routerナビゲーションガード
ナビゲーションガードナビゲーションガードは、ルーティングジャンプ時にvue-routerによって提供されるナビゲーションガードが主にジャンプまたはキャンセル に使用される.パラメータまたはクエリの変更は、イン/アウトをトリガするナビゲーションガード を出さない.
完全なナビゲーション解析プロセスナビゲーションがトリガ 現在のナビゲーションすなわち不活性なナビゲーション呼び出しは、ガード(beforeRouteLeave) から離れる.グローバルbeforeEachガード を呼び出す再利用コンポーネントでbeforeRouteUpdateガード(2.2+) を呼び出すルーティング構成でbeforeEnter を呼び出す解析非同期ルーティングコンポーネント アクティブなコンポーネントでbeforeRouteEnter を呼び出すグローバルbeforeResolveガード(2.5+) を呼び出すナビゲーション確認 グローバルafterEachフック を呼び出す DOM更新 をトリガする.は、作成されたインスタンスでbeforeRouteEnterガードからnextに渡されるコールバック関数を呼び出す. ルーティング呼び出しは、まず元のルーティングを離れ、ルーティングをトリガしてフックを離れ、その後グローバルでbeforeEachを呼び出し、その後、現在ルーティングbeforeRouteEnterを更新し、ルーティングbeforeEnterに入り、ルーティングbeforeRouteEnterを呼び出し、ルーティングbeforeResolveを確認し、グローバルafterEachを呼び出し、
グローバルガードグローバルフロントガード to:route:アクセスするターゲットルーティングオブジェクト from:router:現在のナビゲーションが離れるルーティング next: function, next()は、パイプ内の次のフック を行う. next(false)は、現在のナビゲーションを中断する.ブラウザのurlが変更された場合、urlアドレスはfromルーティングに対応するアドレス をリセットする. next('/')またはnext({path:'/'})は異なるアドレスにジャンプし、元のジャンプ中断 next(error):(2.4+)、パラメータはeoorインスタンスであり、ナビゲーションが終了し、routerにエラーが伝達される.onError()のコールバック
グローバル解析ガード(2.5+) router.beforResolveはグローバルガードを登録します.これとrouter.beforeEachと同様に、ナビゲーションが確認される前に、すべてのコンポーネント内のガードと非同期ルーティングコンポーネントが解析されると、解析ガードが 呼び出される.
グローバルバックフックはグローバルバックフックを登録することができるが、ガードとは異なり、これらのフックはnext関数を受け入れず、ナビゲーション自体を変更することはない .
ルート独自のガードは、ルーティング構成上、beforeEnterガード を直接定義することができる.
コンポーネント内のガード
完全なナビゲーション解析プロセス
グローバルガード
router.beforeEach((to, from, next) => {
//...
})
グローバル解析ガード(2.5+)
グローバルバックフック
router.afterEach((to, from) => {
//...
})
ルート独自のガード
routes:[
{
path: '/foo',
componet: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
コンポーネント内のガード
beforeRouteEnter
// confirm
// ！ ！ `this`
// ，
next
beforeRouteEnter: (to, from, next) => {
next((vm) => {
//vm
});
}
beforeRouteUpdate(2.2+)
// ，
// ， /foo/:id， /foo/1 /foo/2 ，
// Foo ， 。 。
// `this`
beforeRouteLeave
//
// `this`