Vue a deux fonctions de hook de routage, à savoir : 1. Global guard (fonction de hook global), qui fait référence à l'objet routeur dans « index.js » ; 2. Routing guard (pour une seule fonction de hook de routage) ; les protections (fonctions de hook au niveau des composants) sont des protections définies à l'intérieur des composants de routage.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3. La fonction hook de
vue-router fait en fait référence au garde de navigation. 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 est principalement utilisé pour garder la navigation en sauter ou annuler > . Il existe de multiples possibilités d'intégration dans le processus de navigation sur un itinéraire : globalement, exclusivement pour un seul itinéraire, ou au niveau des composants. 🎜🎜🎜C'est-à-dire : Global guard (fonction de hook globale), Routing guard (pour une fonction de hook de routage unique), Component guard (fonction de hook au niveau du composant) ). 🎜css🎜🎜
🎜index.js dans notre objet code>router. 🎜router.beforeEach. 🎜🎜
🎜beforeEach La garde avant globale reçoit trois paramètres🎜next n'a pas besoin d'être ajouté, mais une fois ajouté, il doit être appelé une fois, sinon le routage saute, etc. . s'arrêtera. 🎜🎜 Plusieurs cas de la méthode next()🎜de. routeur Les options dans push sont les mêmes. router.onError(). 
🎜beforeEach. On peut voir que le saut de page ne se produit qu'après l'impression de deux journaux deux secondes plus tard. 🎜🎜
🎜🎜🎜🎜sauf avantEach En plus de la garde avant globale, plusieurs autres gardes globales peuvent être définies, et la navigation attendra que toutes les gardes soient terminées. Les autres fonctions de crochet ne seront pas démontrées. 🎜router.beforeResolve. 🎜rrreee🎜Paramètre de rappel, la valeur de retour est la même que beforeEach. Il est également possible de définir plusieurs gardes d'analyse globales. 🎜Global post hook, il se produit une fois le saut d'itinéraire terminé, après beforeEach et beforeResolve, beforeRouteEnter (garde à l'intérieur du composant) Avant. Il se déclenche également à chaque navigation. 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更新。- 调用
Enregistrez un posthook global viabeforeRouteEnter守卫中传给nextrouter.afterEach.
Ceci Les deux paramètres du hook sont les mêmes que to et from dans beforeEach. Cependant, contrairement à d'autres hooks globaux, ces hooks n'acceptent pas la fonction next et ne modifient pas non plus la navigation elle-même.
Comme son nom l'indique, il s'agit d'un hook lié au routage. Nous n'avons qu'un seul garde de route, qui est beforeEnter. beforeEnterVous devez définir la garde beforeEnter sur la configuration du routage. Cette garde ne se déclenche qu'à la saisie de la route. Elle est exécutée immédiatement après beforeEach et ne le sera pas. être exécuté après Se déclenche lorsque les paramètres, query ou hash changent.
🎜🎜beforeEnter route guard sont to, from, next, les mêmes que beforeEach. 🎜
🎜🎜Appelé avant que la route n'entre dans le composant, ce hook est appelé après la garde globale beforeEach et la garde de route beforeEnter, la garde globale beforeResolve et le afterEach global avant d'appeler. 🎜🎜Les paramètres incluent <code>à, de, suivant. 🎜🎜L'instance du composant n'est pas accessible dans cette garde, c'est-à-dire que this est non défini, c'est-à-dire qu'il est déclenché avant le beforeCreate cycle de vie. 🎜🎜beforeRouteUpdate🎜🎜
🎜🎜Pour beforeRouteUpdate, this est déjà disponible, il n'est donc pas nécessaire de passer un rappel à next. 🎜🎜beforeRouteLeave🎜🎜
🎜🎜Pour beforeRouteLeave, this est déjà disponible, donc passer un rappel à next n'est pas nécessaire. 🎜
- La navigation est déclenchée. 🎜
- Appelez la garde
beforeRouteLeavedans le composant désactivé. 🎜- Appelez la garde globale
beforeEach. 🎜- Appelez la garde
beforeRouteUpdatedans le composant réutilisé. 🎜- Appelez
beforeEnterdans la configuration du routage. 🎜- Résoudre les composants de routage asynchrone. 🎜
- Appelez
beforeRouteEnterdans le composant activé. 🎜- Appelez la garde globale
beforeResolve. 🎜- Navigation confirmée. 🎜
- Appelez le hook global
afterEach. 🎜- Déclenchez les mises à jour du
DOM. 🎜- Appelez la fonction de rappel passée à
nextdans la gardebeforeRouteEnter, et l'instance de composant créée sera transmise en tant que paramètre de la fonction de rappel. 🎜🎜🎜🎜Ce qui précède est la réponse officielle. Nous utilisons maintenant un organigramme pour le montrer intuitivement. 🎜🎜🎜🎜🎜Recommandations associées : "🎜Tutoriel vue.js🎜"🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
