一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。
路由独享守卫
路由独享的守卫是在路由中的配置对象中去定义beforeEnter守卫。在调用之后只会在进入路由的时候去触发，不会在参数或者查询参数以及hash发生变化时去触发。beforeEnter守卫只有在不同路由导航过来的时候才会触发。而且这个方法还可以传递一个函数的数组，就是为了不同路由复用守卫时用的。
const routes = [{
path: '/web/:id',
component: WebTest,
beforeEnter: (to, from) => {
return false
}
}]
组件内的守卫有beforeRouteUpdate、beforeRouteEnter和beforeRouteLeave。其中第二个守卫时不能访问this，这是因为守卫在导航前调用时，新进入的组件此时还没有被创建。如果我们想要访问可以通过向可选的next()函数传递一个回调来访问实例。将组件的实例作为参数传递给回调。这样当导航确认后就会执行回调，此时的组件实例已经创建完成了。我们需要注意的是，这个方法是支持将回调传递给next()函数的导航守卫，而其他两个方法是不需要的，因为它们的this是可以使用的，所以不需要传递回调更不需要next传递回调。beforeRouteLeave守卫可以用来防止用户没有保存修改前离开页面，方法是通过返回false取消导航。
导航解析全部过程是从导航被触发，然后在失活组件中调用beforeRouteLeave守卫，再调用全局的beforeEach守卫后在复用组件中调用beforeRouteUpdate守卫，之后调用配置中beforeEnter守卫，进行解析异步路由组件，激活后调用beforeRouteEnter守卫，调用全局的beforeResolve守卫，这时候导航被确认，再调用afterEach钩子，然后触发dom更新，最后将创建好的实例调用beforeRouteEnter守卫传给next()函数的回调函数。
数据获取有两种，导航前获取是在beforeRouteEnter中获取数据，数据获取完成后调用next()函数再进行导航。如果是导航后获取，先执行导航，随后在导航进入的组件生命周期中获取数据，此时显示加载状态。使用导航后获取可以立即导航和渲染进入组件并在created钩子中获取数据，还可以为每个视图处理不同的加载。在进入视图获取资源时，用户会停留在上一个视图中，所以我们在获取数据时现在加载中或者进度条来显示情况，如果数据获取识别，我们也要给出对应的警告提示信息。
