问题引入
试想这样一个业务场景：
在用户输入数据，点击提交按钮后，这时发起了ajax请求，如果请求成功，
则跳转到详情页面并展示详情数据，失败则不跳转到详情页面，只是在当前页面给出错误消息。
难点所在
需要注意的是，这里并没有单独的接口用于判断用户是否通过校验，而是若用户通过校验，接口就直接返回了用户需要的详情信息，未通过校验则不会返回详情信息并报错。
常见方案问题分析
（一）用户点击按钮后直接跳转到详情页面，在详情页面的created钩子函数中发起ajax请求获取数据
问题在于：
若用户未通过校验，也会先跳转到详情页面，然后再报错，
而我们的目标是先判断是否成功，成功了再进行路由跳转。
（二）将详情页面写在弹窗中，不进行路由跳转。在当前页面发起请求，成功则在弹窗中展示详情数据，失败了则不展示弹窗
问题在于：
弹窗中的内容特别多的情况下，排版不容易，很容易难看，毕竟弹窗一般适用于展示少量数据 ，
并且产品的设计要求可能就是需要单独页面展示，不允许使用弹窗。
另外，如果路由和页面都已经写好了，再去写弹窗也会额外增加不少工作量
（三）发两次请求：当前页面发起第一次请求，失败了不进行跳转；成功了在详情页面再发起一次请求，获取详情数据
这种方式肯定可行，但是问题在于：
同一个api发送了两次请求，多发一次请求白白耗费了网络资源
（四）当前页面发起请求，失败了进行错误提示；成功了，则跳转到详情页面，并通过Vuex或者空组件实现非父子组件通信的方式将数据携带至详情页面展示
这种方式的问题在于：
Vuex的设计目标是存储系统各组件共用的状态，例如用户登录状态、菜单伸缩收起状态，
这里仅有两个组件，采用Vuex有种大炮打蚊子的感觉，使用空组件事件传值实现非父子组件通信
会略显繁琐。并且这两种方式加大了系统复杂度，也容易有新坑。
（五）浏览器缓存
不用说，更加繁琐了,也偏离更远了。
推荐解决方案：使用Vue Router的beforeRouteEnter路由导航守卫
（一）beforeRouteEnter简介：
它本质上，类似于Vue.js的生命周期钩子函数。它在新路由被确认前被调用，可以在里面进行数据处理，发起ajax获取数据，甚至是取消导航。当调用该守卫时，页面仍停留在原页面。该守卫执行完毕后（包括异步获取数据），才会跳转到新页面。
（二）使用案例
在详情组件中使用beforeRouterEnter路由守卫：
import $axios from '@/libs/axios';
import api from '@/api';
export default {
name:'testComponent',
data(){
return {};
},
beforeRouteEnter(to, from, next) {
$axios
.get(api.GetQueueSettingDetail, {
params: {
waybillKey: to.params.pickCode,
warehouseType: 11
}
})
.then(resp => {
if (resp.success) {
next(vm => {
vm.carInfo = resp.result;
});
} else {
next(false);
}
})
.catch(() => {
next(false);
});
},
}
在以上案例中，在新路由被确认前，先发起ajax请求，若成功，就将数据赋值给该组件的carInfo，并跳转到新路由。若失败，调用next(false)回调函数取消导航，页面仍停留在原页面。
该方案相对来说，比较圆满的实现了开篇所提的业务需求，并且没有额外的开销。
（三）参数说明
三个参数
- to 即将要进入的目标 路由对象
- from 当前导航正要离开的路由
- next 回调函数，一定要调用该方法来 resolve 这个钩子，可以在里面取消导航（next(false)）或进行数据处理
(四) 注意事项
- beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。因而上面示例中api和axios都采用了手动导入，没有使用this.axios或者this.api的方式。
- 访问组件实例的方式是，通过传一个回调给 next来访问组件实例，也不能使用this。在上面示例中，获取数据成功后，使用的是vm.carInfo而不是this.carInfo。
- next(false)的作用是取消导航，这时，一切操作都停留在原页面，看起来就像什么也没发生一样。