目次
グローバル ガード
パラメータと意味はグローバル ガードと同じですが、定義される位置が異なります
コンポーネント内の新しいガード、 beforeRouteUpdate は、コンポーネントが再利用できる場合にトリガーされます (/demo/:id、/demo/1 2 の /demo/ にジャンプ、/demo が再利用可能、および beforeRouteUpdate
#
ホームページ ウェブフロントエンド jsチュートリアル Vue-router には JavaScript にどのようなフックとアプリケーションがありますか?

Vue-router には JavaScript にどのようなフックとアプリケーションがありますか?

Feb 19, 2019 pm 03:55 PM
javascript

この記事の内容は、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) {
    ...
  }
}
ログイン後にコピー

# など)。 ## がトリガーされます。コンポーネントはまだ作成されているため、beforeRouteEnter の前に現在のコンポーネントの this を取得することはできません。論理操作を実行するコンポーネント
  • 使用シナリオ
ルーティング前の最後のエントリ 通常、次の場合に、何らかの権限制御、一部の情報、タスクなどのクリアまたは保存を行うことができます。

概要

vue-router のフックは、グローバル、ローカル、コンポーネントの 3 つのタイプに分かれており、すべてフロント ガードとバック ガードがあります。コンポーネントはまだ作成されていないため、現在のコンポーネントの this を取得できません。フロント ガードは next メソッドを呼び出す必要があります。そうしないと、次のチューブに入りません。

#

以上がVue-router には JavaScript にどのようなフックとアプリケーションがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

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

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

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

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

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

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

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

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

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

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

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

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

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

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

JavaScriptでinsertBeforeを使用する方法

See all articles