关于在beforeRouteEnter中调用axios获取数据的一个问题

Vue中进入某个路由后，需要从服务器获取数据。官方提供两种方式：

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
个人不太喜欢loading图标，所以利用nprogress模拟微信加载进度条。使用方法在这里不赘述，网上有很多教学。那么就需要使用第二种数据获取方式了，在beforeRouteEnter中调用axios：

import axios from '@/axios'

beforeRouteEnter(to,from,next){
axios(config.API+’/details’).then(res=>{
res = res.data
if(res.code == 0){
next(vm=>{
vm.setData()//这个方法里处理从后台获取到的数据
})
}
})
}

在这里插入代码片
``这样就可以实现上一个路由跳转到下一个路由之前，先获取后台数据，这之间页面会有进度条显示。数据获取到之后，再进行跳转，进度条消失。效果和多页面网页一样。

## 但是当请求数据的时候需要向后台传参，而这个参数是从上个路由传值过来的（通过query或者params），以上方法显然无法实现。
因为在beforeRouteEnter没有办法调用组件实例，也就是说this为undefined。
**这时候我们可以使用sessionStorage配合另一个组件守卫beforeRouteLeave来实现**

//上个路由组件内
beforeRouteLeave (to, from , next) {
if(to.path == ‘/下一个路由路径’){
window.sessionStorage.setItem(‘code’,to.query.code)
next()
}
}

//下个路由组件内
		beforeRouteEnter(){
			let code = window.sessionStorage.getItem('code')
			axios(config.API+'/details',{source:code}).then(res=>{
				res = res.data
				if(res.code == 0){
					next(vm=>{
						vm.setData()//这个方法里处理从后台获取到的数据
					})
				}
			})
		}

这样就可以实现beforeRouteEnter内没法使用this.$route.query/params的尴尬了。
**以上方法，纯属个人见解，如果各位有更好的办法，欢迎留言指正。**