路由守卫

作用

用于跳转或者取消的方式来守卫导航。

路由守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。

​ 钩子函数：

1. beforeEach

   全局前置路由

2. afterEach

   全局后置路由，参数只有(to,from)，没有next回调记住。

3. beforeEnter

   在路由配置中直接定义，守卫单个路由。

4. beforeRouteEnter

   组件内路由，直接当做组件的钩子函数用。在组件渲染之前调用，因此不能用this哦_{，但是next回调的参数中提供了vm，你可以进行使用。其他钩子函数都不提供，只此一家}

5. beforeRouteUpdate

   同上，为组件内路由。这个是针对带有动态参数的路径来设置的，形如：/foo/:id，在 /foo/1 和 /foo/2。因为这种形式的路径，组件会进行复用，这个钩子就是针对这种情况而出现的，是新出的。可以通过this来访问组件实例哦~

6. beforeRouteLeave

   同上，为组件内路由。当导航离开路由时调用~，也可以使用this来访问组件实例哦。

全局前置守卫（最常用）

语法

const router = new VueRouter({ ... })

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

其中，

to：将要进入的路由对象。

from：当前将要离开的路由对象。

next()：通过该方法来控制路由接下来如何跳转。

如何跳转？

1. next()。正常向下执行。
2. next(false)。中断当前导航
3. next('/')。跳转到指定的不同地址。
4. next(error)。当参数为Error实例时，则导航对跳转到router.onError()注册过的回到函数。