那么基于这个事实，再看看上面的假设（callback01会执行）~
ok！插曲完毕！
解法
首先让我回顾一下目的，路由组件对异步请求返回的数据有强依赖，因此希望阻塞组件的渲染流程，待到异步请求响应完毕之后再执行。
这就是我们需要做的事情，需要强调的一点是： 我们对数据有强依赖 ，言外之意就是数据没有按预期返回，就会导致之后的逻辑出现不可避免的异常。
接下来，我们就需要探讨一下解决方案！
组件内路由守卫了解一下！？
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
这里需要用到的路由守卫是： beforeRouterEnter ， 先看代码：
// exp-05
export default {
beforeRouteEnter(to, from, next) {
this.showLoading();
this.getList()
.then((resp) => {
this.hideLoading();
this.list = resp.data;
next();
})
.catch((error) => {
this.hideLoading();
// handle error
});
}, mounted() {
let endTime;
const startTime = Date.now();
console.log(`start mounted: ${startTime}ms`);
console.log(this.list.rows);
endTime = Date.now();
console.log(`end mounted: ${endTime}ms, cost: ${endTime - startTime}ms`);
},
};
路由守卫 beforeRouterEnter ，触发这个钩子后，主线程都会阻塞，页面会一直保持假死状态，直到在调用 beforeRouterEnter 的回调函数 next ，才会跳转路由进行新路由组件的渲染。
看起这个解决方案相当适合上面我们提出的需求，在调用 next 前，就可以去拉取数据！
但是如刚刚说到的，页面在一直假死，加入数据获取花费时间过长就难免变得很难看，用户体验未免太差
为此，在 exp-05 中我在请完成前后分别调用了 this.showLoading() 和 this.hideLoading() 以便页面 keep-alive 。
这个处理假死的loading有没有让你想到写什么，没错就是下面这个github跳转页面是顶部的小蓝条
想想就有点cool，当然还有很多的实现方式提升用户体验，比如作为body子元素的全屏loading，或者button-loading等等……
当然，我们知道阻塞主线程怎么都是阻塞了，loading只是一种自欺欺人式的优化（此时这个成语可不是什么贬义的词语）！
因此，不是对数据有非常强的依赖，都应在路由的钩子进行数据抓取，这样就可以让用户“更快”地跳转到目的页。为避免页面对数据依赖抛出的异常（大概就是 undefined of xxx ），我们可以对初始数据进行一些预设，比如 exp-01 中对 this.list.rows 的依赖，我们可以预设 this.list ：
list: {
