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

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.pushto 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue ルーティング ナビゲーション ガードとリクエスト インターセプションおよびノー​​ドベースのトークン認証方法

<<:  MySQL で遅いファジークエリを最適化する方法

>>:  モバイル開発におけるHTML5開発の現状を深く理解する

推薦する

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

MySQL インデックスの原理と使用例の分析

この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...

Vue3スタイルのCSS変数注入の実装

目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...

Vueページの初回読み込み最適化の全プロセス

目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...

CSSはヒントボックス、バブルボックス、三角形を作成します

場合によっては、ページにプロンプ​​ト ボックスやバブル ボックスが必要になることがあります。CSS...

Docker 自動ビルド 自動ビルド実装プロセス図

自動ビルドとは、Docker Hub を使用して、Dockerfile ファイルを含む GitHub...

MySQLクエリ条件の一般的な使用法の詳細な説明

この記事では、例を使用して、MySQL クエリ条件の一般的な使用方法を説明します。ご参考までに、詳細...

JavaScript 即時実行関数の使用状況分析

一般的に、関数は実行する前に呼び出す必要があることはご存じのとおりです。以下に示すように、関数を定義...

Spring Boot + jar パッケージングのデプロイメント Tomcat 404 エラーの問題を解決する

1. Spring Boot は jsp jar パッケージをサポートしていません。jsp は wa...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

MySQLの外部ネットワークアクセス権を開く方法

以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...

Vue の 4 つのカスタム命令の説明と使用例

4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...

VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)

1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...

Nodejs 配列キューと forEach アプリケーションの詳細な説明

この記事では、Nodejs 開発プロセスで遭遇する配列の特性によって発生する問題と解決策、および配列...