vue-router的认识

2021-03-15 本文已影响0人 Viewwei

vue-router中保护路由安全通常使用导航守卫来做,通过设置路由导航钩子函数的方式添加守卫.在里面判断用户状态和权限,从而达到保护路由的方式
具体的实现几个层次:全局前置守卫 (beforeEach),路由独享守卫(beforeEnter)和组件路由守卫(beforeRouterEnter).已全局守卫路由守卫为例:可以使用 beforeEach(to,form,next)方式设置守卫,每次路由导航时,都会执行该守卫,从而检查当前路由是否继续导航,通过给next函数传递各种参数达到不同的目的.比如如果禁止用户继续导航,可以设置 false,正常放行可以不传参数,传递 path 可以导航到不同的路由
这些钩子之所以能够生效,也和 vue-router的工作方式有关,想 beforEach 只是注册一个 hook,当路由发生变化的时候,router 准备导航之前会批量执行这些 hooks,并且把目标路由 to,当前路由 from,已经后续处理函数 next 传递给我设置的 hook

beforRouterEnter(to,from,next){
  next(vm=>{
  //vm就是组件实例
})
}