Tabla de contenido
1. El concepto de guardia de ruta.
2. Clasificación de los guardias de enrutamiento.
(1) Guardia de enrutamiento global
(2) Protección de enrutamiento de componentes
3. Proceso completo de análisis de navegación.
4. Interpretación de los tres parámetros.
1. El concepto de guardia de ruta.
Los guardias de ruta se utilizan principalmente para proteger la navegación saltando o cancelando . Hay múltiples oportunidades para incorporar en el proceso de navegación de rutas: globalmente, exclusivas de una única ruta o a nivel de componente.
Puede entenderse simplemente como el guardia de seguridad en la puerta de una casa. Si quieres entrar a la casa, debes pasar la inspección de seguridad. ¿Debes decirle al guardia de ruta de dónde eres? ¿No puedes simplemente dejar entrar a extraños? ¿Dónde ir? ¿Y luego el guardia de seguridad te dice qué hacer a continuación? Si realmente es una persona a la que el dueño de la casa le permite ingresar, entonces se le permitirá ingresar. De lo contrario, tendrá que llamar al dueño de la casa y hablar con el propietario (iniciar sesión y registrarse) para darle permiso.
2. Clasificación de los guardias de enrutamiento.
(1) Guardia de enrutamiento global
El llamado guardia de ruta global es la puerta de la comunidad. Solo hay una puerta en toda la comunidad. Si desea ingresar a cualquier casa, debe pasar por la inspección de esta puerta. Hay dos guardias de ruta global: uno es la guardia frontal global y el otro es
la guardia global . Después de la guardia, las funciones de enlace incluyen beforeEach , beforeResolve y afterEach en orden de ejecución .
1. [beforeEach] : Se activa antes de que la ruta salte. Los parámetros incluyen a, desde y siguiente (los parámetros se introducirán por separado). Este gancho se utiliza principalmente para la verificación de inicio de sesión. Se notifica antes de que la ruta salte. Saltará será demasiado tarde para notificarle más tarde.
2.[beforeResolve]: después de analizar el componente, esta función de enlace es similar a beforeEach, también se activa antes de que la ruta salte y tiene tres parámetros: hacia, desde y siguiente.
3. [afterEach]: a diferencia de beforeEach, se activa después de que se completa el salto de ruta. Los parámetros incluyen to, from pero no next. Ocurre después de beforeEach y beforeResolve y antes de beforeRouteEnter.
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
...
next(); //所有前置守卫最后都需要调用next()进入下一个管道
})
// 全局后置守卫，没有next
router.afterEach((to, from) => {
...
})
// 全局前置解析守卫，和router.beforeEach类似，在所有组件内守卫以及异步路由组件解析完后触发
router.beforeResolve((to, from, next) => {
...
next();
})(2) Protección de enrutamiento de componentes
La protección de enrutamiento del componente es una función de enlace ejecutada dentro del componente. Similar a las funciones de enlace del ciclo de vida dentro del componente, el orden de ejecución es beforeRouteEnter, beforeRouteUpdate y beforeRouteLeave.
1.[beforeRouteEnter]: se llama antes de la entrada de la ruta, los parámetros incluyen hasta, desde, siguiente. Esta función de enlace se llama después de la guardia global beforeEach y la guardia exclusiva beforeEnter, y antes de la global beforeResolve y la global afterEach.
2.[beforeRouteUpdate]: se llama cuando la ruta actual cambia y el componente se reutiliza, se puede acceder a la instancia a través de esto. Los parámetros incluyen hasta, desde, siguiente. Se llamará a este guardia cuando cambie la consulta de ruta actual.
3.[beforeRouteLeave]: se llama cuando la navegación abandona la ruta correspondiente del componente. Puede acceder a la instancia del componente this y los parámetros incluyen hacia, desde y siguiente.
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
}(3) Guardia exclusiva de ruta
Defina guardias directamente en la configuración de ruta beforeEnter :
[beforeEnter] : exactamente igual que beforeEach, si ambos están configurados, se ejecutará inmediatamente después de beforeEach, parámetros a, desde, siguiente
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})3. Proceso completo de análisis de navegación.
- Se activa la navegación.
- Llame al guardia en el componente desactivado
beforeRouteLeave. - Llama a la
beforeEachguardia global. beforeRouteUpdateLlame a guardias (2.2+) en componentes reutilizados .- Llamado en la configuración de enrutamiento
beforeEnter. - Resolver componentes de enrutamiento asíncrono.
- Llamado en el componente activado
beforeRouteEnter. - Llame a los guardias globales
beforeResolve(2.5+). - La navegación está confirmada.
- Llame a ganchos globales
afterEach. - Activa la actualización de DOM.
- Llame a la función de devolución de llamada
beforeRouteEnterpasada en guardnexty la instancia del componente creado se pasará como parámetro de la función de devolución de llamada.
4. Interpretación de los tres parámetros.
1.a: objeto de ruta de destino, es decir, el lugar al que se dirige;
2.desde: el objeto de enrutamiento que está a punto de salir;
3.siguiente: es el parámetro más importante, solo después de llamar a este método se puede ingresar a la siguiente función de enlace.
(1) next() //Ingrese directamente la ruta señalada por
(2) next(false) //Interrumpa la ruta actual
(3) next('route') //Salte a la ruta especificada
(4) next( 'error') //Saltar a la ruta de error
Para obtener más detalles, consulte la documentación oficial——
https://router.vuejs.org/en/guide/advanced/navigation-guards.html#to