Vue-router には JavaScript にどのようなフックとアプリケーションがありますか?
Feb 19, 2019 pm 03:55 PMこの記事の内容は、Vue-router が JavaScript にどのようなフックとアプリケーションを備えているかについてです。困っている友人は参考にしていただければ幸いです。
Vue-router にはどのようなフックがありますか?使われるシーンは?
ルーターの実装は、ここをクリックできます。
以前、この言語でのフックとは何かについて説明しましたが、ここでも繰り返します。何が前で、何が後、英語ではフックと呼ばれます。専門家であればライフサイクル、気取った人であればガードと呼ばれます...
フックの概念は vue-router にも存在します。メモリの 3 つのステップに分割されます
グローバル ガード
ルート排他的ガード
コンポーネント排他的ガード
グローバル ガード
#これは簡単に理解できますが、グローバル ガードはグローバル ルーターの動作を監視できます。- ##router。 beforeEach は、ルートが転送されるときにトリガーされます。
-
const router = new VueRouter({ ... }) // to 要进入的目标路由对象 // from 当前的路由对象 // next resolve 这个钩子,next执行效果由next方法的参数决定 // next() 进入管道中的下一个钩子 // next(false) 中断当前导航 // next({path}) 当前导航会中断,跳转到指定path // next(error) 中断导航且错误传递给router.onErr回调 // 确保前置守卫要调用next,否然钩子不会进入下一个管道 router.beforeEach((to, from, next) => { // ... })
ログイン後にコピー
- router.afterEach は、ルートが置換されるときにトリガーされます
-
// 与前置守卫基本相同,不同是没有next参数 router.afterEach((to, from) => { // ... })
ログイン後にコピー
- router.beforeResolve
- router.beforeEach と同様に、すべてのコンポーネントのガードと非同期ルーティング コンポーネントの解析後にトリガーされます
ルート排他的ガード
パラメータと意味はグローバル ガードと同じですが、定義される位置が異なります
const router = new VueRouter({ routes: [ { path: '/', component: Demo, beforeEnter: (to, from, next) => { // ... }, afterEnter: (to, from, next) => { // ... }, } ] })
コンポーネント排他的ガード
コンポーネント内の新しいガード、 beforeRouteUpdate は、コンポーネントが再利用できる場合にトリガーされます (/demo/:id、/demo/1 2 の /demo/ にジャンプ、/demo が再利用可能、および beforeRouteUpdate
const Demo = { template: `...`, beforeRouteEnter (to, from, next) { ... }, // 在当前路由改变,但是该组件被复用时调用 beforeRouteUpdate (to, from, next) { ... }, beforeRouteLeave (to, from, next) { ... } }
- 使用シナリオ
#
以上がVue-router には JavaScript にどのようなフックとアプリケーションがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

JavaScript で HTTP ステータス コードを簡単に取得する方法
