コンセプト: 「ナビゲーション」はルートが変わることを意味します
航行ガード:グローバル航行ガードとローカル航行ガードを含む 1. グローバルガードvue-routerには3つのグローバルガードがある
1. グローバル前線警備router.beforeEach を使用してグローバルな before guard を登録できます。 const ルーター = 新しい VueRouter({...}) router.beforeEach((to, from, next) => { // to と from はどちらもルーティングインスタンスです // to: ジャンプ先のルート // from: 離れる現在のルート // next: 関数 })
いつか彼を解放してあげてください。そうしないと、彼は同じことを繰り返し続けるでしょう。 2. グローバル解像度ガード2.5.0 新機能 // グローバル解決ガード router.beforeResolve((to,from.next) => { }) 2.5.0 以降では、 解決ガードは、ナビゲーションが確認される前、およびすべてのコンポーネント ガードと非同期ルート コンポーネントが解決された後に呼び出されます。 3. グローバルポストフックグローバル after-hook を登録することもできますが、ガードとは異なり、これらのフックは next 関数を受け取らず、ナビゲーション自体を変更しません。 // グローバルポストフック router.afterEach((to,form) => { })
3. ルーター専用ガードルーティングをグローバルに設定したくない場合は、特定のルートに対してガードを個別に設定できます。 たとえば、 { パス: '/mainpage', 名前: 'About'、 コンポーネント: About、// ルーティング排他ガード beforeEnter:(to,from,next) => { if(from.name === '/mainpage/about'){ alert("これはaboutからのものです") }それ以外{ 警告("これは about からのものではありません") }next(); // 次のステップを実行するには呼び出す必要があります。そうでなければジャンプしません。 } }, 4. コンポーネント内のガード最後に、ルート コンポーネント内で直接次のルート ナビゲーション ガードを定義できます。
製品の例を見てみましょう。 // グローバル解決ガード 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) // 離れない }, }
5. 完全なナビゲーション分析プロセス
これで、Vue ルーティング ナビゲーション ガードについて簡単に理解する方法に関するこの記事は終了です。Vue ルーティング ナビゲーション ガードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: モバイル開発におけるHTML5開発の現状を深く理解する
操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...
この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...
目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...
目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...
場合によっては、ページにプロンプト ボックスやバブル ボックスが必要になることがあります。CSS...
自動ビルドとは、Docker Hub を使用して、Dockerfile ファイルを含む GitHub...
この記事では、例を使用して、MySQL クエリ条件の一般的な使用方法を説明します。ご参考までに、詳細...
一般的に、関数は実行する前に呼び出す必要があることはご存じのとおりです。以下に示すように、関数を定義...
1. Spring Boot は jsp jar パッケージをサポートしていません。jsp は wa...
現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....
以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...
4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...
1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...
この記事では、Nodejs 開発プロセスで遭遇する配列の特性によって発生する問題と解決策、および配列...