vue路由守卫axios请求数据

Question

vue路由守卫axios请求数据需求：进入页面之前，axios请求数据，根据判断，跳转到对应路由。做法：1、想在组件路由守卫beforeRouteEnter  axios请求数据，axios是获取不到的，报错。2、在created请求数据跳转，这样页面会先显示出来，效果不好。3、写个空白页请求数据跳转。。。但目前不想这样搞请问：还有其他方法吗？

Answer 1

针对 axios 获取不到，你是想获取全局的 axios 实例，因为 钩子函数中不能使用 this ? 组件还没创建，当然获取不到，可以使用 @慕村9548890 提供的方式：

beforeEnter(to, from, next){

// 组件创建后回调

next(vm => {

// vm 相当于 this,，这个时候组件已经创建

vm.$axios.get(...)...

})

}

Answer 2

1. axios 获取不到是什么意思？

2. created 只是做初始化工作，mounted 还没走到呢，怎么会先显示出来？

3. 还不如 2 呢

Answer 3

做法1 可以在router.js import axios 实例

其他办法：

1. 可以使用Router.routes的beforeEnter（路由独享的守卫）

2. 可以使用beforeRouteEnter（组件内的守卫）

3. 调用全局的 beforeResolve 守卫

Answer 4

最后在router.js里面引入axios,然后使用原型指向，因为直接使用axios.get会报protocol的错误，所以使用原型