Each guard method receives three parameters:
to: the target route object that is about to enter
from: the route that the current navigation is about to leave
next: execute the next step
next() usage:
1.next(): proceed to the next hook in the pipeline . If all the hooks are executed, the status of the navigation is confirmed.
2.next({ name:'Login' }) or next({ path:'/' }): Jump to an address.
3.next(false): interrupt the current navigation. If the URL of the browser changes (maybe the user manually or the browser back button), the URL address will be reset to the address corresponding to the from route.
4.next(error): If the parameter passed in next is an Error instance, the navigation will be terminated and the error will be passed to the callback registered by router.onError().
1. Global routing guard
(1) Global front guard
import router from './router'
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
//全局参数透传
if (!to.query.product) {
next({
path: to.path,
query: {
product: 'xxx'
}
});
} else {
next();
}
})
(2) The
difference between the global resolution guard and the global front guard is that before the navigation is confirmed, the resolution guard is called after the guard and asynchronous routing components in all components are resolved.
router.beforeResolve ((to, from) => {
// ...
})
(3) Global rear guard
router.afterEach((to, from) => {
// ...
})
2. Route exclusive guard
The usage is consistent with the global routing guard. Just write it into a route object, and only work in the current route
routes: [
{
path: "/home",
component: Home,
beforeEnter: (to, from, next) => {
// ...
}
}
];
3. The guard inside the component
The component instance this cannot be accessed, because the component instance has not been created before the guard is executed.
Access through the next() callback function.
Note: The monitored component must have sub-routes, otherwise the following methods will not be executed
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
Can access the component instance this
beforeRouteUpdate (to, from, next) {
this.name = to.params.name
next()
}
//之前用的是
watch: {
$route(to,from){
if(to.path.includes("myAct")){
this.getData()
}
}
},
This leave guard is usually used to prohibit users from leaving suddenly before saving changes. This navigation can be cancelled by next(false). Can access the component instance this
beforeRouteLeave (to, from, next) {
const answer = window.confirm('确定离开当前页面吗?')
if (answer) {
next()
} else {
next(false)
}
}