vue-router にはいくつかのフックがあります

フックは 7 つあります: 1. beforeEach; 2. beforeResolve; 3. afterEach; 4. beforeEnter; 5. beforeRouteEnter; 6. beforeRouteUpdate; 7. beforeRouteLeave。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue-router フック関数はいくつありますか?それは正確に何であり、実行プロセスは何ですか?

まずはマインドマップから始めます。

分析

フック関数

ofvue-router は、実際には ナビゲーション ガード # を参照します##。

公式サイトより引用

「

Navigation」はルートが変更中であることを示します。

vue-router 提供されるナビゲーション ガードは、主に jump または cancel Guard Navigation# に使用されます。 ##。ルート ナビゲーション プロセスを組み込む機会は複数あります。グローバル、単一ルート専用、またはコンポーネント レベルです。

つまり、

グローバル ガード

、ルーティング ガード、コンポーネント ガードです。

コードデモ環境の構築まず簡単に環境をセットアップします

index.js

/*
 * @Description:一尾流莺
 * @Date: 2021-03-21 16:17:56
 * @LastEditTime: 2021-07-18 15:14:42
 * @FilePath: \vite-project-js\src\router\index.js
 */

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/a',
      component: () => import('../components/A.vue'),
    },
    {
      path: '/b',
      component: () => import('../components/B.vue'),
    },
    {
      path: '/c',
      component: () => import('../components/C.vue'),
    },
  ],
});
export default router;

main .js

// index.js
import router from "./router"; 
createApp(App).use(router).mount("#app");

ページ A

<template>
  <div>
    <h1>我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

ページ B

<template>
  <div>
    <h1>我是页面B啊</h1>
    <comp></comp>
  </div>
</template>

ページ C

<template>
  <div>
    <h1>我是页面C啊</h1>
    <comp></comp>
  </div>
</template>

一般コンポーネント

<template>
  <div>我是公用组件啊</div>
</template>

現在ページ これはこんな感じです、ちょっと見苦しいです、ただ見てみましょう、私たちは学ぶためにここにいるわけではありません

css

Global Guard

名前が示すように、これはグローバルに定義されており、

index.js

の router オブジェクトです。

beforeEachグローバル フロント ガード。ルート ジャンプ前にトリガーされ、

毎回ナビゲーション

でトリガーされます。

router.beforeEach

を通じてグローバル beforeEach ガードを登録します。

#パラメータ

beforeEach

グローバル フロント ガードは、次の 3 つのパラメータを受け取ります。 Route

: 進入しようとしているターゲット ルート オブジェクト

from: Route

: 現在のナビゲーションが出発しようとしているルート オブジェクト
• next: Function
: このメソッドを呼び出す必要があります。そうしないと、ルーティングがブロックされます。
注:
• next パラメータを追加する必要はありませんが、追加したら一度呼び出す必要があります。そうしないと、ルーティング ジャンプなどが停止します。 。

next() メソッドのいくつかの状況

next():

パイプラインの次のフックに進みます。

next(false):

現在のナビゲーションを中断します。
• from ルートに対応するアドレスに戻ります。
• next('/') または next({ path: '/' }): 別のアドレスにジャンプします。渡せるパラメータは router と同じです.push オプションは同じです。
• next(error): ナビゲーションが終了し、エラーが router.onError() 登録されたコールバックに渡されます。
• 最初の 2 つのパラメータを出力して見てみましょう。これらにはパス、パラメータ、メタ情報などが含まれています。
#戻り値

false

: 現在のナビゲーションをキャンセルします。

null、未定義、true、または直接戻り

: 次のナビゲーション ガードを呼び出します。

• 複数のガードの定義
• 複数のグローバル フロント ガードを定義し、作成順序に従ってそれらを呼び出すことができます。すべてのガードが完了するまでナビゲーションは保留されます。
次の例では、2 つの

beforeEach

グローバル プレガードを定義します。 2 つのログが 2 秒後に出力された後にのみページ ジャンプが発生していることがわかります。

beforeEach

グローバル フロント ガードを除き、他のグローバル ガードは複数回定義でき、ナビゲーションが待機中です。すべてのガードが完了するまで、他のフック機能は発揮されません。

beforeResolve

グローバル解像度ガード、ルーティング ジャンプの前、すべての

内部ガード

と は非同期です。コンポーネント は解析後にトリガーされますが、 各ナビゲーション 中にもトリガーされます。

router.beforeResolve を通じてグローバル解像度ガードを登録します。

router.beforeResolve((to, from, next) => {
  next();
})

回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

afterEach

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在 每次导航 时都会触发。

通过 router.afterEach 注册一个全局后置钩子。

这个钩子的两个参数和 beforeEach 中的 to 和 from 一样。然而和其它全局钩子不同的是，这些钩子不会接受 next 函数，也不会改变导航本身。

路由守卫

顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter。

beforeEnter

需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。

beforeEnter 路由守卫的参数是 to、from、next ，同 beforeEach 一样。

组件守卫

顾名思义，是定义在路由组件内部的守卫。

beforeRouteEnter

路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用。

参数包括 to，from，next。

该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。

beforeRouteUpdate

对于 beforeRouteUpdate 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

beforeRouteLeave

对于 beforeRouteLeave 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

总结

完整的导航解析流程

• 导航被触发。

• 在失活的组件里调用 beforeRouteLeave 守卫。

• 调用全局的 beforeEach 守卫。

• 在重用的组件里调用 beforeRouteUpdate 守卫。

• 在路由配置里调用 beforeEnter。

• 解析异步路由组件。

• 在被激活的组件里调用 beforeRouteEnter。

• 调用全局的 beforeResolve 守卫。

• 导航被确认。

• 调用全局的 afterEach 钩子。

• 触发 DOM 更新。

• 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

上面是官方给出的答案，现在我们用流程图来直观的展示一下。

【相关推荐：《vue.js教程》】

以上がvue-router にはいくつかのフックがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。