Vue-04-路由router导航守卫

一、全局守卫

（1）全局前置守卫beforEach

> 守卫方法接收三个参数：

to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：执行下一步

router.beforeEach((to, from, next) => {
//判断跳转的路径
  if (to.path === '/login') {
    next();
  } else {
  //获取token
    const token = window.sessionStorage.getItem("token");
    if (token) next();
    else next("/login");
  }
});

（2）全局后置钩子afterEach（少用）

全局后置钩子与全局前置守卫类似，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

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

});

二、路由独享的守卫``

使用方法与全局守卫相同
不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

（1）beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

三、组件内的守卫

（1）beforeRouteEnter

在渲染该组件的对应路由被 confirm 前调用
不能获取组件实例 this，因为当守卫执行前，组件实例还没被创建
可以通过 next获取data中的数据

  data() {
    return {
      name: "wwm"
    };
  },  
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      alert("hello world：" + vm.name);
    })
  },

（2）beforeRouteUpdate

如果一个在两个子路由之间跳转，是不触发beforeRouteLeave的。这会导致某些重置操作，没地方触发。在之前，我们都是用watch 的。但是通过这个勾子，我们有了更好的方式。

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

（3）beforeRouteLeave

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
可以访问组件实例 this

  beforeRouteLeave: (to, from, next) => {
    if (confirm("你确定要离开吗") == true) {
      next();
    } else {
      next(false);
    }
  },

完整的导航解析流程

1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave 守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
12.触发 DOM 更新。
13.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

总结

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

内容仅供学习参考，若有错误欢迎大家指正----WUCASE