vue中this.$router.push跳转提示 Cannot read properties of undefined (reading ‘push')

 背景

项目封装axios的全局拦截的时候遇到一个很奇怪的问题：axios.interceptors.request中遇到接口status不是200的情况，想跳到首页，方法如下:

this.$router.push('/Login')

 可是，并没有达到预期的效果，总会提示Cannot read properties of undefined (reading 'push')

探索中。。。。

查了好多资料提供的方法各不一样：

• 网上说的最多的可能就是this指向的问题，于是我把this写在了开头，let self = this; but 还是报错Cannot read property '\$router' of undefined。。。
• 还有说让重写router，用vue.prototype，但是呢，实在不想写，想想还是考虑考虑别的方法吧

解决方案 

 后来console.log(this)发现可能这个封装的方法里面最初this本身就有问题，打印出来是undefined,那怎么整都找不到\$router啊，于是最后在这个js文件中引入了router

关键步骤就是 import router from '@/router'

 然后像下面这样写，就可以实现了

router.push('/Login');

 

附上完整的registerAjax.js 

import Vue from "vue";
import router from '@/router';
import axios from "axios";
import qs from "qs";

axios.interceptors.response.use(    
response => {        
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据        
// 否则的话抛出错误        
// if (response.status === 200) {        
//   return Promise.resolve(response);        
// } else {        
//   return Promise.reject(response);        
// }        
if (response.data.success || response.data.success === undefined) {                    
 return Promise.resolve(response);        
} else {                      
return Promise.reject(response);        
}    },    
// 服务器状态码不是2开头的的情况    
// 这里可以跟你们的后台开发人员协商好统一的错误状态码    
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等    
// 下面列举几个常见的操作，其他需求可自行扩展    
error => {        
if (error.response.status) {            
switch (error.response.status) {                
// 401: 未登录                
// 未登录则跳转登录页面             
// 在登录成功后返回当前页面，这一步需要在登录页操作。                
case 401:                    
   router.push('/Login');              
break;                   
// 403 token过期                    
// 登录过期对用户进行提示                    
// 清除本地token和清空vuex中token对象                    
// 跳转登录页面                
case 403:           
router.push('/Login');               
break;                    
// 404请求不存在                
case 404:                    

break;                    
// 其他错误，直接抛出错误提示                
default:                    

}            
return Promise.reject(error.response);        
}    
});

export default  axios;
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

当然，要是实在是想不到解决办法，我还有个投机取巧的方法，直接用windows本身自带的路径跳转也可以实现了

​