参考资料:vue-router
1、beforeRouteEnter的使用场景:组件复用;路由跳转
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
console.log(to)
console.log(from)
console.log(next)
next(vm => {
console.log(vm)
})
}
使用案例:校验用户是否登录:
beforeRouteEnter: (to, from, next) => {
let user_info = Storage.get(G.storage_key);
if (to && to.path !== "/login") {
if (_.isEmpty(user_info)) {
logout();
} else {
next();
}
} else if (to && to.path === G.loginPage) {
if (!_.isEmpty(user_info)) {
next(".hme/);
} else {
next();
}
}
},
2、beforeRouteUpdate
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
// 别忘了调用next
}
使用案例:
beforeRouteUpdate(to, from, next) {
var isNeedRedirect = this.isNeedRedirect(to.path);
if (isNeedRedirect) {
next({name: '_404'});
} else {
next();
}
next();
},
3、beforeRouteLeave
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}