全局
全局守卫包括:router.beforeEach、router.beforeResolve、router.afterEach;
routerbeforeEach:全局前置守卫,在进入路由之前触发;
router.beforeResolve:全局解析守卫,在 beforeRouterEnter 调用之后调用,是在 2.5.0 版本提出的;
router.afterEach:全局后置钩子,在进入路由之后触发;
router.beforeEach((to, from, next) => {
})
to 和 from 参数是将要进入和将要离开的路由对象,路由对象是指平时我们通过 this.$router 获取到的路由对象;next:function 是个函数,且必须要调用,否则不能进入路由,其中 next() 进入该路由;next(false) 取消进入该路由,url 地址重置为 from 路由地址,也就是将要离开的路由地址;next 跳转新路由,当前导航被中断,重新开始一个新的导航;
独享
const router = new VueRouter({
routes: [
{
path: '/login',
component: login,
beforeEnter: (to, from, next) => {
}
}
]
})
参数用法什么的都一样,调用顺序在全局前置守卫后面,所以不会被全局守卫覆盖
组件内
data () {
return {}
},
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被确认前调用,不能获取组件示例this,因为当守卫执行前,组件的实例还没被创建。
},
beforeRouteUpdate (to, from, next) {
// 当路由发生改变,但是该组件被复用时调用。也就是路由参数或者查询改变时。
// 可以访问组件this
},
beforeRouteLeave (to, from, next) {
// 离开该组件的对应路由时调用。
// 可以访问组件this
}