vue-router的认识

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

有哪些路由方法

• 全局前置路由
  beforeEach, afterEach
• 路由独享守卫
  beaforEnter
• 组件路由守卫
  beforeRouteEnter beforeRouteUpdate beforeRouteLeave

全局前置路由,路由独享守卫 组件路由守卫的区别

• 作用域的不用
  全局前置路由守卫是对全局有效的,路由独享只对当前路由有效,组件路由守卫只对当前组件有效
• 组件实例的获取
  全局路由守卫和路由独享守卫不能获取到实例,组件内独享路由守卫是可以获取到组件的实例

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

• 执行顺序不同(vue-router执行顺序)

1. 导航被触发
2. 在失活的组件调用离开守卫
3. 调用全家有的 beforEach 守卫
4. 在重用的组件里调用 beforRouterUpdate 守卫
5. 在路由配置中调用 beforEnter
   6.解析异步组件
6. 在激活的组件中调用 beforeRouterEnter
7. 调用全局的 beforeResolve 守卫
8. 导航被确认
9. 调用全局的 afterEach