vue-router에는 여러 개의 후크가 있습니다

7개의 후크가 있습니다: 1. beforeEach; 4. beforeEnter; 6. beforeRouteUpdate;

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue-router에는 몇 개의 후크 기능이 있나요? 정확히 무엇이고 실행 과정은 어떻게 되나요? vue-router 有几种钩子函数？具体是什么及执行流程是怎样的？

先上思维导图。

分析

vue-router 的 钩子函数 ，其实说的就是 导航守卫 。

引用官网的话

“导航” 表示路由正在发生改变。

vue-router 提供的导航守卫主要用来通过 跳转 或 取消 的方式 守卫导航 。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

也就是：全局守卫、路由守卫、组件守卫。

代码演示环境搭建

先简单搭建一下环境

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 id="我是页面A啊">我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

页面B

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

页面C

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

通用组件

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

当前页面是这样的，有点丑，凑活看吧，咱也不是来学习 css 的

全局守卫

顾名思义，是要定义在全局的，也就是我们 index.js 中的 router 对象。

beforeEach

全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。

通过 router.beforeEach 注册一个全局前置守卫。

参数

beforeEach 全局前置守卫接收三个参数

• to: Route: 即将要进入的目标路由对象
• from: Route: 当前导航正要离开的路由对象
• next: Function: 一定要调用该方法不然会阻塞路由。

注意： next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。

next（）方法的几种情况

• next(): 进行管道中的下一个钩子。
• next(false): 中断当前的导航。回到 from 路由对应的地址。
• next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址，可传递的参数与 router.push 中选项一致。
• next(error): 导航终止，且该错误会被传递给 router.onError() 注册过的回调。

我们把前两个参数打印出来看一下，里面包含路径，参数，元信息等内容。

返回值

• false：取消当前的导航。
• null，undefined，true或者直接return：调用下一个导航守卫。

定义多个守卫

全局前置守卫可以定义多个，根据创建顺序调用。在所有守卫完成之前导航一直处于等待中。

下面这个例子中我们就定义了两个 beforeEach 全局前置守卫。可以看到，只有在两秒以后分别打印出两条日志后才进行页面的跳转。

除了 beforeEach 全局前置守卫之外，其他的全局守卫都可以定义多个，并且在所有守卫完成之前导航一直处于等待中，其他的钩子函数就不进行演示了。

beforeResolve

全局解析守卫，在路由跳转前，所有 组件内守卫 和 异步路由组件 被解析之后触发，它同样在 每次导航 时都会触发。

通过 router.beforeResolve

마인드맵으로 시작해보세요. 🎜🎜🎜

분석

🎜vue-router의 후크 기능은 실제로 탐색 가드를 참조합니다. 🎜🎜공식 홈페이지에서 인용🎜🎜🎜 "내비게이션"은 경로가 변경된다는 의미입니다. 🎜🎜🎜🎜 vue-router에서 제공하는 내비게이션 가드는 주로 점프 또는 취소에 의한 내비게이션 보호에 사용됩니다. > . 경로 탐색 프로세스를 구축할 수 있는 기회는 여러 가지가 있습니다. 전역적으로, 단일 경로에 대해 단독으로 또는 구성 요소 수준에서 말이죠. 🎜🎜🎜즉, Global Guard, Routing Guard, Component Guard입니다. 🎜🎜코드 데모 환경 구축🎜🎜먼저 간단하게 환경🎜🎜index.js🎜

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

🎜main을 설정해보겠습니다. js🎜rrreee 🎜Page A🎜rrreee🎜Page B🎜rrreee🎜Page C🎜rrreee🎜🎜공통 구성요소🎜🎜rrreee🎜현재 페이지는 이렇습니다. 조금 보기 흉합니다. 한 번 보세요. 우리는 배우려고 온 것이 아닙니다. < code>css 🎜🎜🎜

글로벌 가드

🎜이름에서 알 수 있듯이 이는 index.js</code의 <code>라우터 객체인 전역적으로 정의됩니다. >. 🎜🎜beforeEach🎜🎜경로 점프 전에 트리거되는 전역 프론트 가드는 모든 탐색에서 트리거됩니다. 🎜🎜router.beforeEach를 통해 전역 beforeEach 가드를 등록하세요. 🎜🎜🎜🎜매개변수 🎜🎜beforeEach 전역 프론트 가드는 세 개의 매개변수를 받습니다🎜

• to: Route: 곧 진입하려는 대상 라우팅 객체
• from: Route: 현재 탐색이 곧 떠날 경로 개체
• next: 함수: 이 메소드를 호출해야 합니다. 그렇지 않으면 경로가 차단됩니다.

🎜참고: next 매개변수는 추가할 필요가 없지만 일단 추가되면 한 번 호출해야 합니다. 그렇지 않으면 점프 등을 라우팅합니다. .멈추겠습니다. 🎜🎜 next() 메서드의 여러 사례🎜

• next(): 파이프라인의 다음 후크로 진행합니다.
• next(false): 현재 탐색을 중단합니다. from 경로에 해당하는 주소로 돌아갑니다.
• next('/') 또는 next({ path: '/' }): 다른 주소로 점프, 전달할 수 있는 매개변수는 router.push의 옵션은 동일합니다.
• next(error): 탐색이 종료되고 오류는 router.onError()에 의해 등록된 콜백으로 전달됩니다.

🎜처음 두 매개변수를 인쇄하여 경로, 매개변수, 메타정보 등이 포함되어 있는지 살펴보겠습니다. 🎜🎜🎜🎜반환 값< /strong>🎜

• false: 현재 탐색을 취소합니다.
• null, 정의되지 않음, true 또는 직접 반환: 다음 탐색 가드를 호출합니다.

🎜여러 가드 정의 🎜🎜 생성 순서에 따라 여러 글로벌 프론트 가드를 정의하고 호출할 수 있습니다. 모든 가드가 완료될 때까지 탐색이 보류됩니다. 🎜🎜다음 예에서는 두 개의 beforeEach 전역 프론트 가드를 정의합니다. 2초 후에 두 개의 로그가 출력된 후에야 페이지 점프가 발생하는 것을 알 수 있다. 🎜🎜🎜🎜< img alt="vue-router에는 여러 개의 후크가 있습니다"/>🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!