序文
最近、Vue のルーティング ガードについて勉強しているのですが、ルーティング ガードの知識が豊富な気がするので、ちょっとメモしておきます。
1. ルートガードとは何ですか?
ルーティング ガードは主に、ジャンプまたはキャンセルによってナビゲーションをガードするために使用されます。ルート ナビゲーション プロセスに注入する機会は複数あります。グローバル、単一ルート固有、またはコンポーネント レベルです。
簡単に言うと、家の入り口にいる警備員です。家に入りたい場合は、セキュリティチェックを通過する必要があります。巡回警備員に自分の出身地を伝えますか? ランダムに見知らぬ人を入れることはできないのですか？どこに行くの？そうすると警備員が次に何をすべきか教えてくれるでしょうか？あなたが本当に家の所有者によって許可された人である場合は、中に入れてください。そうでない場合は、家の所有者に電話し、所有者と話し合って（ログインして登録し）、許可を与える必要があります。
2. ルーティングガードの完全な分析
フック関数実行後の出力順序を見てみましょう。
ナビゲーション ガードは、グローバル、単一ルート専用、コンポーネント内という 3 つのタイプに分類されます。それぞれを見てみましょう。
1. グローバルルーティングガード
いわゆるグローバル ルーティング ガードはコミュニティのゲートです。コミュニティ全体にゲートは 1 つだけあります。その中の家に入ろうとする場合は、このゲートの検査を通過する必要があります。グローバル ルーティングは 2 つありますガード: 1 つはグローバル フロント ガード、もう 1 つは
グローバル ポスト ガードです。フック関数には、実行順にbeforeEach、beforeResolve、の 3 つが含まれます。afterEach
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数
}
router.afterEach（to，from） = {
}
[beforeEach]: ルートがジャンプする前にトリガーされ、パラメータには to、from、next が含まれます (パラメータは別途紹介します) 3、このフックは主にログイン検証、つまりルートがジャンプする前の通知に使用され、通知は遅くなります。ジャンプアップ後。
[beforeResolve]: コンポーネントが解析された後、このフック関数は beforeEach と似ており、ルートがジャンプする前にもトリガーされ、パラメーターも to、from、next になります。
[afterEach]: beforeEach とは反対に、ルーティング ジャンプが完了した後にトリガーされます。パラメータには to、from、no next が含まれます。beforeEach と beforeResolve の後、および beforeRouteEnter の前に発生します。
2. コンポーネント配線ガード
コンポーネント ルート ガードはコンポーネント内で実行されるフック関数で、コンポーネント内のライフサイクル フック関数と同様に、実行順序は beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave の 3 つです。
beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
next(vm => {
})
}
beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
[beforeRouteEnter]: ルートに入る前に呼び出され、パラメータには to、from、next が含まれます。このフック関数は、グローバル ガード beforeEach と排他的ガード beforeEnter の後、グローバル beforeResolve とグローバル afterEach の前に呼び出されます。
[beforeRouteUpdate]: 現在のルートが変更され、コンポーネントが再利用されるときに呼び出され、これを通じてインスタンスにアクセスできます。パラメータには、to、from、next が含まれます。現在のルート クエリが変更されると、ガードが呼び出されます。
[beforeRouteLeave]: ナビゲーションがコンポーネントの対応するルートを離れるときに呼び出されます。コンポーネント インスタンスにアクセスでき、パラメーターには to、from、next が含まれます。
3. ルーティング専用ガード
現在、Enter の前にフック関数が 1 つだけあります。
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
[beforeEnter]: beforeEach と全く同じです 両方設定すると beforeEach の直後に実行されます パラメータ to, from, next
ルーティング ガード フックの 3 つのパラメータを個別に導入します
to。ターゲット ルーティング オブジェクト。
from: 出発しようとしているルーティング オブジェクト。
next: 最も重要なパラメータであり、このメソッドを呼び出した後、次のフック関数に入ることができます。
next()// to
next(false) // 現在のルートを中断
next('route') // 指定されたルートにジャンプ
next('error') // 間違ったルートにジャンプ