本文已参与[新人创作礼]活动，一起开启掘金创作之路
vue路由导航守卫
-
router.beforeEach（重点掌握） -
router.afterEach（重点掌握） -
router.beforeResolve（了解） -
beforeEnter（了解） -
beforeRouteEnter（了解） -
beforeRouteLeave（ 了解） -
beforeRouteUpdate（了解）
1 router.beforeEach
只要路由值发生变化就会触发
router.beforeEach((to,from,next)=>{
next()
})
to : 要去哪
from : 从哪来
next : 直接放行 next() ，跳转到其他页面 next(其他页)
注意 ： 导航路由守卫函数中，一定要调用next()
2 router.afterEach
导航被确认后，后置钩子不会接收next()也不会改变导航本身
router.afterEach((to, from) => {
// ...
})
3 router.beforeResolve
又名解析守卫，与router.beforeEach类似，区别在于在导航被确定之前，同时在所有组件内守卫和异步路由被解析之后，解析守卫就被调用
router.beforeEach((to,from,next)=>{
next()
})
4 beforeEnter
可以称呼为路由独享守卫，在路由配置上直接定义beforeEnter守卫
const router = new VueRouter({
routers: [
{
path : '/xx',
component:xx,
beforeEnter:( to , from , next ) => {
//...
}
}
]
})
5 beforeRouteEnter
组件实例未创建前调用，无法访问this
router.beforeEach((to,from,next)=>{
next()
})
6 beforeRouteLeave
导航离开该组件对应的路由时调用
router.beforeEach((to,from,next)=>{
next()
})
7 beforeRouteUpdate
复用时调用
router.beforeEach((to,from,next)=>{
next()
})
