foreword
Recently, I am learning about Vue routing guards. I feel that routing guards have a lot of knowledge here. Let me make a small note.
1. What is Route Guard?
Routing guards are mainly used to guard navigation by jumping or canceling. There are multiple opportunities to inject into the route navigation process: globally, specific to a single route, or at the component level.
It can be simply understood as the security guard at the door of a house. If you want to enter the house, you must pass the security check. Tell the routing guard where you are from? Can't just put random strangers in? Where are you going? Then the security will tell you what to do next? If you are indeed the person allowed by the owner of the house, then let you in, otherwise you have to call the owner of the house, discuss with the owner (login and register), and give you permission.
2. Full analysis of routing guards
Let's take a look at the order of the output after the hook function is executed.
Navigation guards are divided into three types: global, exclusive to a single route, and within components. Take a look at each:
1. Global routing guard
The so-called global routing guard is the gate of the community. There is only one gate in the whole community. If you want to enter any house in it, you need to go through the inspection of this gate. There are two global routing guards: one is the global front guard, and the other is the
global Post-guard, the hook function includes beforeEach, beforeResolve, afterEachthree in order of execution.
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数
}
router.afterEach（to，from） = {
}
[beforeEach]: Triggered before the route jumps, the parameters include to, from, next (parameters will be introduced separately). up.
[beforeResolve]: After the component is parsed, this hook function is similar to beforeEach, and it is also triggered before the route jumps, and the parameters are also to, from, and next.
[afterEach]: Contrary to beforeEach, it is triggered after the routing jump is completed. The parameters include to, from and no next. It occurs after beforeEach and beforeResolve, and before beforeRouteEnter.
2. Component routing guard
The component route guard is the hook function executed in the component, similar to the life cycle hook function in the component, the order of execution is beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave three.
beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
next(vm => {
})
}
beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
[beforeRouteEnter]: Called before the route enters, the parameters include to, from, next. This hook function is called after the global guard beforeEach and the exclusive guard beforeEnter, and before the global beforeResolve and the global afterEach.
[beforeRouteUpdate]: Called when the current route changes and the component is reused, the instance can be accessed through this. Parameters include to, from, next. When the current route query changes, the guard will be called
[beforeRouteLeave]: Called when the navigation leaves the corresponding route of the component, the component instance this can be accessed, and the parameters include to, from, next.
3. Routing Exclusive Guard
Currently it has only one hook function beforeEnter
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
[beforeEnter]: It is exactly the same as beforeEach. If both are set, it will be executed immediately after beforeEach. The parameters to, from, next
Separately introduce the three parameters of the routing guard hook
to: the target routing object;
from: The routing object that is about to leave;
next: It is the most important parameter. After calling this method, you can enter the next hook function.
next()//directly enter the route pointed to by to
next(false) //interrupt the current route
next('route') //jump to the specified route
next('error') //jump to the wrong route