路由守卫 : 在进入页面之前拦截下来 ,做一些操作 ,分为三种 :全局守卫,组件守卫,独享守卫
1)全局守卫
1.router.beforeEach 全局前置守卫 进入路由之前
2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3. router.afterEach 全局后置钩子 进入路由之后
分别 接收一个函数为参数,这个函数有三个参数 to,from ,next
注意 : 要写在 路由实例化 后面
router.beforeEach((a,from,next)=>{
console.log(a,from,next)
next()
})
全局后置守卫 只有两个 参数 to , from ,
router.afterEach((to,from,next)=>{
console.log(to,from,next)
})
2)组件守卫
- beforerouteenter 路由进入之前
- beforerouteUpdata 路由更新时触发
- beforerouteLeave 路由离开
3)独享守卫
-
beforeEach 有三个参数 to,form,next
写在 路由配置的地方
{
path: '/login/:id',
name: 'login',
component: ()=>import('../views/login.vue'),
//独显守卫
beforeEnter(to,from,next) {}
}