Article directory
foreword
In Vue.js, Vue Router provides a series of routing guards (navigation guard) for interception and control during routing switching to meet different business needs.
Vue Router's routing guards are mainly divided into three categories:
- Global Route Guard
- Routing Exclusive Guard
- Guards inside components`
Besides 全局路由守卫, Vue Router also provides 路由独享守卫and 组件内的守卫. Among them, the routing exclusive guard is to intercept and control a specific routing instance, while the guard in the component is to intercept and control a specific component.
1. Global routing guard
Vue Router's global routing guards are mainly divided into three categories:
- Global front guard (beforeEach)
- Global resolution guard (beforeResolve)
- Global post guard (afterEach)
Global front guard beforeEach
The global front guard is one of the most commonly used routing guards in Vue Router. It will intercept and control before routing switching to meet different business needs. The usage of the global pre-guard is as follows:
const router = new VueRouter({
routes: [
// ...
]
})
router.beforeEach((to, from, next) => {
// ...
})
In the global pre-guard, we can access the routing object that is about to enter to, as well as the current routing object from. In addition, you can also control the jump behavior of the route through nextthe function . If nextthe function and a route object is passed in, it will jump to that route. If nextthe function , the current route will not change.
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()
} else {
if (isLogin()) {
next()
} else {
next('/login')
}
}
})
In the above example, we judge whether the route to be entered is a login page. If it is a login page, jump directly to this route. If it is not a login page, determine whether the user is already logged in. If you are already logged in, jump to this route; if you are not logged in, jump to the login page.
Global resolution guard beforeResolve
The global resolve guard is on 路由解析之前进行拦截和控制, and it will be called after all global pre-guard resolves have completed. The usage of the global parsing guard is similar to that of the global front guard:
router.beforeResolve((to, from, next) => {
// ...
})
In the global parsing guard, we can also access the upcoming routing object toand the current routing object
Global post guard afterEach
The global rear guard afterEachwill 在每次路由跳转结束后被调用，无论是正常跳转还是取消跳转. It receives three parameters:
We can do some global finishing work through afterEachhooks , such as burying points, page scrolling and other operations.
router.afterEach((to, from) => {
// 埋点
trackPage(to.path)
// 页面滚动到顶部
window.scrollTo(0, 0)
})
It should be noted that, afterEachunlike other routing hooks, the hook cannot control the routing jump behavior by calling nextfunctions , because the routing jump has ended at this point. afterEachIf nextthe function is called within a hook, an error will be thrown.
javascript
// 会抛出一个错误
router.afterEach((to, from, next) => {
// ...
next()
})
2. Routing exclusive guard beforeEnter
Exclusive routing guard beforeEnter
Exclusive routing guard is 针对某个具体的路由实例进行拦截和控制. It is similar to the usage of the global front guard, except that it is for a specific routing instance.
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
In the routing exclusive guard, we can also access the upcoming routing object to and the current routing object from. In addition, you can also control the jump behavior of the route through the next function. If the next function is called and a route object is passed in, it will jump to that route. If the next function is not called, the current route will not change
Three, the guards beforeRouteEnter, beforeRouteUpdate and beforeRouteLeave in the component
The guard within the component is to intercept and control a specific component. It is divided into three types:
- beforeRouteEnter: Called before a route enters the component.
- beforeRouteUpdate: Called when routing updates the component.
- beforeRouteLeave: Called when a route leaves the component.
The three guards are used as follows:
export default {
beforeRouteEnter (to, from, next) {
// ...
},
beforeRouteUpdate (to, from, next) {
// ...
},
beforeRouteLeave (to, from, next) {
// ...
}
}
In the guard in the component, we can also access the upcoming routing object to and the current routing object from. In addition, you can also control the jump behavior of the route through the next function. If the next function is called and a route object is passed in, it will jump to that route. If the next function is not called, the current route will not change.
It should be noted that since the component instance this cannot be accessed in the beforeRouteEnter hook, the data and methods of the component instance cannot be accessed in this hook. If you need to access the data and methods of the component instance, you can use next(vm => {}) to pass in a callback function, and access the component instance in the callback function.
export default {
beforeRouteEnter (to, from, next) {
next(vm => {
console.log(vm.message)
})
}
}