Vueルーティングナビゲーションガードの簡単な理解

vue-routerが提供するナビゲーションガードは、主にジャンプやキャンセルによるナビゲーションを保護するために使用されます。ルートナビゲーションプロセスにフックする機会は複数あります (グローバル、特定の 1 つのルート、またはコンポーネントレベル)。

航行ガード：グローバル航行ガードとローカル航行ガードを含む

1. グローバルガード

vue-routerには3つのグローバルガードがある

router.beforeEach : ルータに入る前のグローバルフロントガード
router.beforeResolve : beforeRouteEnterが呼び出された後に呼び出されるグローバル解決ガード (一般的には使用されない)
router.afterEach : ルートに入った後のグローバルポストフック

1. グローバル前線警備

router.beforeEach を使用してグローバルな before guard を登録できます。

const ルーター = 新しい VueRouter({...})
router.beforeEach((to, from, next) => {
// to と from はどちらもルーティングインスタンスです // to: ジャンプ先のルート // from: 離れる現在のルート // next: 関数 })

next: Function : このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は、次のメソッドの呼び出しパラメータによって異なります。
next() : パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションステータスがconfirmed 。
next(false) : 現在のナビゲーションを中断します。ブラウザの URL が変更された場合 (ユーザーが手動で変更するか、ブラウザの戻るボタンを押して変更した場合)、URL アドレスは from ルートに対応するアドレスにリセットされます。
next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが実行されます。任意の場所オブジェクトを next に渡すことができ、 replace: true 、 name: 'home' などのオプションや、 router-linkまたはrouter.pushのto propで使用されるオプションを設定できます。
next(error) : (2.4.0+) next に渡された引数が Error インスタンスの場合、ナビゲーションは中止され、エラーはrouter.onError()に登録されたコールバックに渡されます。

注意: next('/') または next({ path: '/' }) の場合、解放するパスが含まれている限り、その前に判定が存在する必要があります。

いつか彼を解放してあげてください。そうしないと、彼は同じことを繰り返し続けるでしょう。

2. グローバル解像度ガード

2.5.0 新機能

// グローバル解決ガード router.beforeResolve((to,from.next) => { })

2.5.0 以降では、 router.beforeResolveを使用してグローバルガードを登録できます。これはrouter.beforeEachと似ていますが、

解決ガードは、ナビゲーションが確認される前、およびすべてのコンポーネントガードと非同期ルートコンポーネントが解決された後に呼び出されます。

3. グローバルポストフック

グローバル after-hook を登録することもできますが、ガードとは異なり、これらのフックは next 関数を受け取らず、ナビゲーション自体を変更しません。

// グローバルポストフック router.afterEach((to,form) => { })

理由: afterEachが呼び出されると、ルートはすでにリダイレクトされているので、次の関数は必要ありません。

3. ルーター専用ガード

ルーティングをグローバルに設定したくない場合は、特定のルートに対してガードを個別に設定できます。

たとえば、 mainpageページ用に別のガードを設定する

{ 
パス: '/mainpage', 
名前: 'About'、 
コンポーネント: About、// ルーティング排他ガード beforeEnter:(to,from,next) => {
 if(from.name === '/mainpage/about'){ alert("これはaboutからのものです") 
   }それ以外{
 警告("これは about からのものではありません") 
   }next(); // 次のステップを実行するには呼び出す必要があります。そうでなければジャンプしません。
} 
},

4. コンポーネント内のガード

最後に、ルートコンポーネント内で直接次のルートナビゲーションガードを定義できます。

beforeRouteEnter()：ルートに入る前
beforeRouteUpdate()：ルートが同じコンポーネントを再利用する場合
beforeRouteLeave()：現在のルートを離れるとき

製品の例を見てみましょう。

// グローバル解決ガード router.beforeResolve((to,from.next) => {
})
// グローバルポストフック router.afterEach((to,form) => {
})
{
パス: '/mainpage',
名前: 'About'、
コンポーネント: について、
// ルーティング排他ガード beforeEnter:(to,from,next) => {
if (from.name === '/mainpage/about') {
alert("これは約からのものです")
}それ以外{
警告("これは about からのものではありません")
}
next(); // 次の操作を実行するには呼び出す必要があります。そうでなければジャンプしません。
}
},
エクスポートデフォルト{
// コンポーネントの内部ガード beforeRouteUpdate がトリガーされる条件は、現在のルートが変更されるが、コンポーネントが再利用されることです。
たとえば、product/orders から product/cart へのルートは Product.vue コンポーネントを再利用し、beforeRouteUpdate がトリガーされます。このインスタンスを取得できます。
完全なナビゲーション解析プロセス // このフックが呼び出されたときにコンポーネントインスタンスが作成されていないため、これを取得することはできません
beforeRouteEnter (to、from、next) {
console.log(to.name);
// インスタンスを取得したい場合 // next(vm=>{
// // ここでの vm はコンポーネントのインスタンスです (this)
// });
次（）;
},
beforeRouteUpdate(to,from,next){
console.log(to.name, from.name);
次（）;
},
// このメソッドは、ルートを離れるときに呼び出されます // たとえば、ユーザーが何かを編集したが、まだ保存していない場合です。この時点で、ユーザーはこのページを離れようとしているので、まだ保存していないことを思い出させ、離れるかどうかを尋ねる必要があります beforeRouteLeave (to, from, next) {
const leave = confirm("本当に退出しますか?");
if(leave) next() // 離れる else next(false) // 離れない },
}

beforeRouteUpdateは、現在のルートが変更されたがコンポーネントが再利用されたときにトリガーされます。
たとえば、 product/orders から product/cart へのルートは Product.vue コンポーネントを再利用します。
beforeRouteUpdateがトリガーされます。このインスタンスを取得できます。

5. 完全なナビゲーション分析プロセス

1. ナビゲーションが起動します。
2. 非アクティブ化されたコンポーネント (終了しようとしているページコンポーネント) で終了ガードを呼び出します。 beforeRouteLeave
3. グローバルbeforeEachガードを呼び出します。
4. 再利用されたコンポーネントでbeforeRouteUpdateガードを呼び出します (2.2 以降)。
5. ルート設定でbeforeEnter (ルート固有のガード) を呼び出します。
6. 非同期ルーティングコンポーネントの解析
7. アクティブ化されたコンポーネント (これから入力されるページコンポーネント) でbeforeRouteEnter呼び出します。
8. グローバルbeforeResolveガード (2.5 以降) を呼び出します。
9. ナビゲーションが確認されます。
10. グローバルafterEachフックを呼び出します。すべてのフックがトリガーされました。
11. DOM 更新をトリガーします。
12. 作成されたインスタンスを使用して、 beforeRouteEnterガード内の next に渡されるコールバック関数を呼び出します。

これで、Vue ルーティングナビゲーションガードについて簡単に理解する方法に関するこの記事は終了です。Vue ルーティングナビゲーションガードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: