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 对象。
全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。
通过 router.beforeEach 注册一个全局前置守卫。
beforeEach 全局前置守卫接收三个参数
注意： next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。
next（）方法的几种情况
from 路由对应的地址。router.push 中选项一致。router.onError() 注册过的回调。我们把前两个参数打印出来看一下，里面包含路径，参数，元信息等内容。
全局前置守卫可以定义多个，根据创建顺序调用。在所有守卫完成之前导航一直处于等待中。
下面这个例子中我们就定义了两个 beforeEach 全局前置守卫。可以看到，只有在两秒以后分别打印出两条日志后才进行页面的跳转。
除了 beforeEach 全局前置守卫之外，其他的全局守卫都可以定义多个，并且在所有守卫完成之前导航一直处于等待中，其他的钩子函数就不进行演示了。
全局解析守卫，在路由跳转前，所有 组件内守卫 和 异步路由组件 被解析之后触发，它同样在 每次导航 时都会触发。
通过 router.beforeResolve 注册一个全局解析守卫。
router.beforeResolve((to, from, next) => {
next();
})回调参数，返回值和 beforeEach
vue-router에서 제공하는 내비게이션 가드는 주로 점프 또는 취소에 의한 내비게이션 보호에 사용됩니다. > . 경로 탐색 프로세스를 구축할 수 있는 기회는 여러 가지가 있습니다. 전역적으로, 단일 경로에 대해 단독으로 또는 구성 요소 수준에서 말이죠. 🎜🎜🎜즉, 글로벌 가드(글로벌 후크 기능), 라우팅 가드(단일 라우팅 후크 기능용), 컴포넌트 가드(컴포넌트 수준 후크 기능) ). 🎜css🎜🎜
🎜index.js 코드>라우터 객체. 🎜router.beforeEach를 통해 전역 beforeEach 가드를 등록하세요. 🎜🎜
🎜beforeEach 전역 프론트 가드는 세 개의 매개변수를 받습니다🎜next 매개변수는 추가할 필요가 없지만 일단 추가되면 한 번 호출해야 합니다. 그렇지 않으면 점프 등을 라우팅합니다. .멈추겠습니다. 🎜🎜 next() 메서드의 여러 사례🎜from 경로에 해당하는 주소로 돌아갑니다. router.push의 옵션은 동일합니다. router.onError()에 의해 등록된 콜백으로 전달됩니다. 
🎜beforeEach 전역 프론트 가드를 정의합니다. 2초 후에 두 개의 로그가 출력된 후에야 페이지 점프가 발생하는 것을 알 수 있다. 🎜🎜
🎜🎜🎜🎜beforeEach 제외 글로벌 프론트 가드 외에도 여러 다른 글로벌 가드를 정의할 수 있으며 모든 가드가 완료될 때까지 탐색이 대기합니다. 다른 후크 기능은 시연되지 않습니다. 🎜router.beforeResolve를 통해 전역 해상도 가드를 등록하세요. 🎜rrreee🎜Callback 매개변수, 반환 값은 beforeEach와 동일합니다. 여러 전역 구문 분석 가드를 정의하는 것도 가능합니다. 🎜전역 포스트 후크는 경로 점프가 완료된 후, beforeEach 및 beforeResolve, beforeRouteEnter 이후에 발생합니다(구성 요소 내부 보호). 전에. 또한 모든 탐색 시 실행됩니다. beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在 每次导航 时都会触发。
通过 router.afterEach 注册一个全局后置钩子。
这个钩子的两个参数和 beforeEach 中的 to 和 from 一样。然而和其它全局钩子不同的是，这些钩子不会接受 next 函数，也不会改变导航本身。
顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter。
需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。
beforeEnter 路由守卫的参数是 to、from、next ，同 beforeEach 一样。
顾名思义，是定义在路由组件内部的守卫。
路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用。
参数包括 to，from，next。
该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。
对于 beforeRouteUpdate 来说，this 已经可用了，所以给 next 传递回调就没有必要了。
对于 beforeRouteLeave 来说，this 已经可用了，所以给 next 传递回调就没有必要了。
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。- 调用全局的
beforeEach守卫。- 在重用的组件里调用
beforeRouteUpdate守卫。- 在路由配置里调用
beforeEnter。- 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。- 调用全局的
beforeResolve守卫。- 导航被确认。
- 调用全局的
afterEach钩子。- 触发
DOM更新。- 调用
beforeRouteEnter守卫中传给nextrouter.afterEach를 통해 전역 포스트훅을 등록하세요.
이것 후크의 두 매개변수는 beforeEach의 to 및 from과 동일합니다. 그러나 다른 전역 후크와 달리 이러한 후크는 next 함수를 허용하지 않으며 탐색 자체를 변경하지도 않습니다.
이름에서 알 수 있듯이 라우팅과 관련된 Hook입니다. beforeEnter인 Route Guard가 하나만 있습니다. beforeEnter라우팅 구성에서 beforeEnter 가드를 정의해야 합니다. 이 가드는 경로에 들어갈 때만 트리거되며 beforeEach 이후에 즉시 실행됩니다. 매개변수, 쿼리 또는 해시가 변경되면 실행됩니다.
🎜🎜beforeEnter 경로 가드의 매개변수는 to, from, next이며 beforeEach와 동일합니다. >. 🎜
🎜🎜경로가 구성 요소에 들어가기 전에 호출되는 이 후크는 전역 가드 beforeEach 및 경로 가드 beforeEnter, 전역 beforeResolve 및 호출하기 전 전역 afterEach. 🎜🎜매개변수에는 <code>to, from, next가 포함됩니다. 🎜🎜이 가드에서는 구성 요소의 인스턴스에 액세스할 수 없습니다. 즉, this는 정의되지 않습니다입니다. 즉, beforeCreate전에 트리거됩니다. > 생활주기. 🎜🎜beforeRouteUpdate🎜🎜
🎜🎜beforeRouteUpdate의 경우 this가 이미 사용 가능하므로 next에 콜백을 전달할 필요가 없습니다. 🎜🎜beforeRouteLeave🎜🎜
🎜🎜beforeRouteLeave의 경우 this가 이미 사용 가능하므로 next에 콜백을 전달할 필요가 없습니다. 🎜
- 탐색이 트리거됩니다. 🎜
- 비활성화된 구성요소에서
beforeRouteLeave가드를 호출하세요. 🎜- 전역
beforeEach가드를 호출하세요. 🎜- 재사용된 구성요소에서
beforeRouteUpdate가드를 호출하세요. 🎜- 라우팅 구성에서
beforeEnter를 호출하세요. 🎜- 비동기 라우팅 구성요소를 해결합니다. 🎜
- 활성화된 구성요소에서
beforeRouteEnter를 호출하세요. 🎜- 전역
beforeResolve가드를 호출하세요. 🎜- 내비게이션이 확인되었습니다. 🎜
- 전역
afterEach후크를 호출하세요. 🎜DOM업데이트를 트리거합니다. 🎜beforeRouteEnter가드에서next에 전달된 콜백 함수를 호출하면 생성된 구성 요소 인스턴스가 콜백 함수의 매개 변수로 전달됩니다. 🎜🎜🎜🎜위가 공식적인 답변입니다. 이제 이를 직관적으로 보여주기 위해 순서도를 사용합니다. 🎜🎜🎜🎜🎜관련 추천: "🎜vue.js tutorial🎜"🎜
위 내용은 Vue 라우팅 후크 기능에는 몇 가지 유형이 있나요? 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
