vue3原本http://localhost/api/mapping/UserInfo/10001/1 的请求,当切换路由到search后刷新请求变成http://localhost/search/api/mapping/UserInfo/10001/1这种问题如何解决
时间: 2024-09-13 22:04:20 浏览: 48
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Vue3 中遇到路由改变后 API 请求路径自动更改的问题通常是由于未正确配置路由守卫或者是使用了全局混入(global mixin)导致的。通常有两种情况可能导致这个问题:
1. **默认的baseURL设置**:如果你在项目的根组件或配置文件中设置了默认的 base 配置,比如 `axios.defaults.baseURL = '/api'`,这会影响所有的 Axios 请求。在切换路由时,可以尝试移除这个全局设置,改为在每个需要发送 API 请求的地方单独配置。
```javascript
import axios from 'axios';
// 每次创建实例时动态设置 baseURL
const instance = axios.create({
baseURL: process.env.BASE_API_URL || '', // 根据环境变量或默认 ''
// 其他配置项...
});
// 使用 instance 发送请求
instance.get('/mapping/UserInfo/10001/1');
```
2. **路由守卫**:如果在路由守卫中做了修改请求前缀的操作,可以在 `beforeEach` 或其他合适的时机,检查当前路由并相应地更新 Axios 的配置。例如,你可以使用 Vue Router 提供的 `$route` 对象来获取当前路由信息。
```javascript
import router from './router'; // 引入你的路由实例
router.beforeEach((to, from, next) => {
if (to.name === 'search') {
axios.defaults.baseURL = '/search/api';
} else {
axios.defaults.baseURL = '/api';
}
next();
});
```
阅读全文