Vue 라우팅 후크 기능에는 몇 가지 유형이 있나요? 차이점은 무엇입니까?

Vue에는 두 가지 라우팅 후크 기능이 있습니다. 1. "index.js"의 라우터 객체를 참조하는 글로벌 가드(글로벌 후크 기능) 2. 라우팅 가드(단일 라우팅 후크 기능용) 가드(구성 요소 수준 후크 기능)는 라우팅 구성 요소 내부에 정의된 가드입니다.

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

vue-router의 후크 기능은 실제로 탐색 가드를 나타냅니다. vue-router 的 钩子函数 ，其实说的就是 导航守卫 。

引用官网的话

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

vue-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 的

全局守卫

顾名思义，是要定义在全局的，也就是我们 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 注册一个全局解析守卫。

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

回调参数，返回值和 beforeEach

공식 웹사이트 인용🎜🎜🎜 "내비게이션"은 경로가 변경됨을 나타냅니다. 🎜🎜🎜🎜 vue-router에서 제공하는 내비게이션 가드는 주로 점프 또는 취소에 의한 내비게이션 보호에 사용됩니다. > . 경로 탐색 프로세스를 구축할 수 있는 기회는 여러 가지가 있습니다. 전역적으로, 단일 경로에 대해 단독으로 또는 구성 요소 수준에서 말이죠. 🎜🎜🎜즉, 글로벌 가드(글로벌 후크 기능), 라우팅 가드(단일 라우팅 후크 기능용), 컴포넌트 가드(컴포넌트 수준 후크 기능) ). 🎜

코드 데모 환경 설정

🎜먼저 간단하게 환경을 설정하세요🎜🎜index.js🎜rrreee🎜main.js🎜rrreee🎜 페이지 A🎜rrreee🎜페이지 B🎜rrreee🎜페이지 C🎜rrreee🎜공통 구성 요소🎜rrreee🎜현재 페이지는 다음과 같습니다. 이건 좀 못생겼으니 그냥 재미로 보세요. 우리는 css🎜🎜🎜

글로벌 가드

🎜 이름에서 알 수 있듯이 전역적으로 정의됩니다. 즉, index.js 코드>라우터 객체. 🎜

beforeEach

🎜경로 점프 전에 트리거되는 전역 프론트 가드는 탐색할 때마다 트리거됩니다. 🎜🎜router.beforeEach를 통해 전역 beforeEach 가드를 등록하세요. 🎜🎜🎜

매개변수

🎜beforeEach 전역 프론트 가드는 세 개의 매개변수를 받습니다🎜

• to: Route: 진입하려는 대상 경로 개체 li>
• from: Route: 현재 탐색이 곧 떠날 라우팅 개체
• next: 기능: 이 방법 호출해야 합니다. 그렇지 않으면 라우팅이 차단됩니다.

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

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

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

반환 값 h3>

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

여러 가드 정의

🎜생성 순서에 따라 여러 전역 프론트 가드를 정의하고 호출할 수 있습니다. 모든 가드가 완료될 때까지 탐색이 보류됩니다. 🎜🎜다음 예에서는 두 개의 beforeEach 전역 프론트 가드를 정의합니다. 2초 후에 두 개의 로그가 출력된 후에야 페이지 점프가 발생하는 것을 알 수 있다. 🎜🎜🎜🎜🎜🎜beforeEach 제외 글로벌 프론트 가드 외에도 여러 다른 글로벌 가드를 정의할 수 있으며 모든 가드가 완료될 때까지 탐색이 대기합니다. 다른 후크 기능은 시연되지 않습니다. 🎜

beforeResolve

🎜전역 해상도 가드는 라우팅 점프 전, 모든 내부 가드 및 비동기 라우팅 구성 요소가 구문 분석된 후에 트리거됩니다. 탐색할 때마다 실행됩니다. 🎜🎜 router.beforeResolve를 통해 전역 해상도 가드를 등록하세요. 🎜rrreee🎜Callback 매개변수, 반환 값은 beforeEach와 동일합니다. 여러 전역 구문 분석 가드를 정의하는 것도 가능합니다. 🎜

afterEach

전역 포스트 후크는 경로 점프가 완료된 후, beforeEach 및 beforeResolve, beforeRouteEnter 이후에 발생합니다(구성 요소 내부 보호). 전에. 또한 모든 탐색 시 실행됩니다. 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 传递回调就没有必要了。

总结

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next
router.afterEach를 통해 전역 포스트훅을 등록하세요.

이것 후크의 두 매개변수는 beforeEach의 to 및 from과 동일합니다. 그러나 다른 전역 후크와 달리 이러한 후크는 next 함수를 허용하지 않으며 탐색 자체를 변경하지도 않습니다.

Route Guard

이름에서 알 수 있듯이 라우팅과 관련된 Hook입니다. beforeEnter인 Route Guard가 하나만 있습니다.

beforeEnter라우팅 구성에서 beforeEnter 가드를 정의해야 합니다. 이 가드는 경로에 들어갈 때만 트리거되며 beforeEach 이후에 즉시 실행됩니다. 매개변수, 쿼리 또는 해시가 변경되면 실행됩니다.

🎜🎜🎜beforeEnter 경로 가드의 매개변수는 to, from, next이며 beforeEach와 동일합니다. >. 🎜

컴포넌트 가드

🎜이름에서 알 수 있듯이 라우팅 컴포넌트 내부에 정의된 가드입니다. 🎜🎜beforeRouteEnter🎜🎜 🎜🎜경로가 구성 요소에 들어가기 전에 호출되는 이 후크는 전역 가드 beforeEach 및 경로 가드 beforeEnter, 전역 beforeResolve 및 호출하기 전 전역 afterEach. 🎜🎜매개변수에는 <code>to, from, next가 포함됩니다. 🎜🎜이 가드에서는 구성 요소의 인스턴스에 액세스할 수 없습니다. 즉, this는 정의되지 않습니다입니다. 즉, beforeCreate전에 트리거됩니다. > 생활주기. 🎜🎜beforeRouteUpdate🎜🎜 🎜🎜beforeRouteUpdate의 경우 this가 이미 사용 가능하므로 next에 콜백을 전달할 필요가 없습니다. 🎜🎜beforeRouteLeave🎜🎜 🎜🎜beforeRouteLeave의 경우 this가 이미 사용 가능하므로 next에 콜백을 전달할 필요가 없습니다. 🎜

요약

🎜전체 탐색 구문 분석 프로세스🎜

1. 탐색이 트리거됩니다. 🎜
2. 비활성화된 구성요소에서 beforeRouteLeave 가드를 호출하세요. 🎜
3. 전역 beforeEach 가드를 호출하세요. 🎜
4. 재사용된 구성요소에서 beforeRouteUpdate 가드를 호출하세요. 🎜
5. 라우팅 구성에서 beforeEnter를 호출하세요. 🎜
6. 비동기 라우팅 구성요소를 해결합니다. 🎜
7. 활성화된 구성요소에서 beforeRouteEnter를 호출하세요. 🎜
8. 전역 beforeResolve 가드를 호출하세요. 🎜
9. 내비게이션이 확인되었습니다. 🎜
10. 전역 afterEach 후크를 호출하세요. 🎜
11. DOM 업데이트를 트리거합니다. 🎜
12. beforeRouteEnter 가드에서 next에 전달된 콜백 함수를 호출하면 생성된 구성 요소 인스턴스가 콜백 함수의 매개 변수로 전달됩니다. 🎜🎜🎜🎜위가 공식적인 답변입니다. 이제 이를 직관적으로 보여주기 위해 순서도를 사용합니다. 🎜🎜🎜🎜🎜관련 추천: "🎜vue.js tutorial🎜"🎜

위 내용은 Vue 라우팅 후크 기능에는 몇 가지 유형이 있나요? 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!