我们应该如何去理解vue的路由守卫

  现在我把这个router打印出来大家可以看到

这个beforeEach和afterEach都在router的原型上。其实由图我们可以看到他们是一个函数，现在我们可以知道他大概怎么用了吧，传入一个函数让vue封装好的代码去调用我们传入的函数(感兴趣的话可以看源码，原理和promise的源码差不多)。

1.用法router.beforeEach((to, from, next) => {})进入路由前的钩子。传入的函数有三个参数to，form，next。其中的to即将要进入的目标（要进入的页面）。form当前导航正要离开的路由(当前要离开的页面)。next是一个函数。使用next()就是确认离开，next(false)中断当前的导航，next('/a')是让他去a路由。

2.用法router.afterEach((to, from) => {})他没有next因为这个是离开这路由的to和form和上面的用法是一样的

2.路由独享的守卫，写在对于的路由里面

列如：

他的to的form和上面是一样的

3.组件内的守卫顾名思义他是在组件内使用的。用法：可以直接写在组件中

这个我觉得官方的难懂的就是beforeRouteEnter他是还没有进入该路由所有beforeRouteEnter里面的this是undefined的。beforeRouteEnter比beforeCreate是要先执行的。这里的to，form，next和beforeEach是一样的。

beforeRouteLeave他是离开路由时触发的，他之所以能够访问this是因为他还没有真正的离开该组件，所有可以使用this。