Vue中，如何实现在main.js实列化vue前，其他js配置文件中的vue-router也能生效

Question

比如我现在的vue-router是在main.js中配置的，代码如下

按顺序配置好了的，vue组件中使用没问题 this.$router

现在我要有个设置request 和 response 的拦截器，拦截器单独写在了一个叫request.js的文件下，部分代码如下

问题来了，因为拦截器里有些地方需要跳转页面，可现在vue根本没有实例化完成，所以this.$router就会报错，我总不可能在这里再配置一次router吧，之前Iview也遇到类似的，但Iview直接import，不需要配置，这里需要在main.js中配置，所以就不晓得怎么搞了，请各位大佬帮个忙，给点办法，谢谢

Answer 1

将router部分代码改成

export const router = new VueRouter({
//省略
})

在你的request.js 中加入

import {router} from '@/main.js'

router.push({
//省略
})

Answer 2

你把router import进来试试

import router from './router'
...
router.push(...)

Answer 3

你可以把发请求的逻辑写在vue的生命周期中，这样肯定是每次请求都已经在vue实例化之后了

Answer 4

可以把 router 单独到一个文件中 export 出来，如果拦截器先加载完毕可以调整加载顺序或者直接在拦截器中使用 location.href

Answer 5

或者楼主也可以这样，在实例化 Vue 对象的时候，挂载到 window 对象下。然后引用的时候就可以用 window.vm.$router了。

// main.js
window.vm = new Vue({
    router
});

// 其他js文件引用的时候
window.vm.$router.push('login');