导航守卫

使用 jwt 实现用户认证这篇博客中有用到 导航守卫，今天就来总结总结 vue-rotuer 通过导航守卫来监听路由变化，其中导航守卫分为 3 类：全局，单个路由和组件路由

使用场景

• 需要在进入路由前进行一定操作，比如没权限时跳转 login 页面
• 需要组件里路由更新时（动态路由的更新）进行一定操作，比如 "/test/01" => "/test/02"
• 需要在单个路由进入前做一样操作，比如在单页中，路由进入前使用某种与客户端定制的协议

路由

const router = new Router({
  routes: [
    {
      path: "/",
      redirect: "/demo1"
    },
    {
      path: "/demo1/:id",
      component: Demo1,
      beforeEnter: (to, from, next) => {
        next();
      }
    },
    {
      path: "/demo2",
      component: Demo2
    },
    {
      path: "/demo3",
      component: Demo3
    }
  ]
});

具体分类

1. 全局前置路由

• to 即将要进入的路由
• from 要进入的路由的上一个路由
• next 需要用 next 方法，将 beforeEach 这个钩子 resolve，否则无法进入到下一个钩子
  • next(false) 中断当前路由的跳转，路由会重置到 from 路由对应的位置
  • next("/") 跳转到指定地址，因为"/"会 redirect 到"/demo1"，"/demo1"的全局前置路由又 next("/") 所以就会栈溢出
  • next() 执行下一个钩子
  • next(error) 抛出一个异常

router.beforeEach((to, from, next) => {
  next();
});

2. 全局后置路由

• to 和 from 和全局前置路由一致

router.afterEach((to, from) => {});

3. 路由独享守卫

• 参数和全局前置路由一致，也需要执行 next 方法

router.beforeEnter((to, from, next) => {
  next();
});

前三个的执行顺序是 beforeEach=>beforeEnter=>afterEach

4. 组件路由

  beforeRouteEnter (to, from, next) {
    next(vm=>{
      console.log(vm,'enter')
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    console.log(this,'update')
    next()
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    console.log(this,'leave')
    next()
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

第四个的执行顺序是 beforeRouteUpdate=>beforeRouteLeave=>beforeRouteEnter