vue如何在axios.js中跳转页面(解决办法)

1.main.js中抛出vue
main.js部分关键代码

const vue=new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

export default vue

2.axios.js中引入vue并使用其相关方法
部分关键代码:

import vue from '../main'
instance.interceptors.request.use(
	(config) => {
		vue.$router.push('/home')//this.$router.push('/home'),this无法响应
		return config
	},
	(error) => {
		if (loading) {
			tryHideFullScreenLoading()
		}
		//请求错误处理
		return error;
	}
)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue项目全局配置axios和路由,可以按照以下步骤进行: 1. 安装axiosvue-router ``` npm install axios vue-router --save ``` 2. 在src目录下创建一个config.js文件,用于存放全局配置 ```javascript import axios from 'axios' import router from '../router' // axios配置 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.timeout = 5000 // 请求拦截器 axios.interceptors.request.use( config => { // 如果有token则添加到请求头 if (localStorage.token) { config.headers.Authorization = localStorage.token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面,并携带当前页面的路径 // 在登录成功后返回当前页面,这一步需要在登录页操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuextoken对象 // 跳转登录页面 case 403: alert('登录过期,请重新登录') // 清除token localStorage.removeItem('token') // store.commit('loginSuccess', null) setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: alert('网络请求不存在') break // 其他错误,直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response) } } ) export default axios ``` 3. 在main.js引入config.js文件,并将axios和router挂载到Vue.prototype上 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from './config' Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.prototype.$router = router new Vue({ router, render: h => h(App), }).$mount('#app') ``` 现在可以在Vue项目的任何地方使用axios和router了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值