Vue 路由进阶 - - 导航守卫

别名：

• 导航守卫
• 路由守卫
• 路由钩子
• 路由拦截

1. 作用： — 类似 【保安】

   • 守卫路由
     • 进
       • 举例： 携带数据进
     • 出
       • 举例： 事情完成才能出

2. 导航守卫一共有三种形式 【 项目三选一 】

   • A: 全局导航守卫

     针对的整个项目，也就是管理或是监听整个项目

     1. 全局前置守卫 router.beforeEach(fn)
        1. fn中有三个参数
           1. to： 目标路由
           2. from： 当前路由
           3. next： 它是一个拦截，表示是否允许通过
              1. true/false/’/login’/{ name: ‘login’}/ vm => {}
        2. 使用场景： 当我们本地存储/cookie中有token，那我们就自动跳转 /mine
     2. 全局的解析守卫
        1. 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
        2. 必须保证整个项目的守卫和异步路由组件解析完成
     3. 全局的后置守卫
        • 可以做一些用户友好提示

   • B: 路由独享守卫 ·

     路由配置选项中的一个

     • 写在路由表中的守卫钩子
     • 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
     • 做路由拦截
       • 案例： 权限验证
         • 数据库： 用户组
           • 普通用户
           • 管理员
           • 超级管理员
         • 我们登录式，后台会返回给我们info信息，通过信息来判断它是哪个类型用户

   • C: 组件内守卫【 王者 】

     当前组件

     • 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})

       • 导航进入组件时，调用
       • this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
       • 因为组件此时没有创建