问题描述

在使用vue-element-admin作为前端框架进行开发时，我们常常会发起请求与后端进行数据交互。然而，有时候我们可能会犯一个低级错误，那就是请求路径拼凑不正确。本文将探讨这个问题，并提供解决方案。

问题分析

我们知道，在vue-element-admin中，发送请求一般使用axios库。当我们编写请求时，通常会定义请求的url，然后通过axios进行发送。但是，有时候我们可能会拼凑出错误的url，导致请求失败。下面是一个示例：

// 错误的url拼凑方式
const apiUrl = '/api'
const path = '/user'
const url = apiUrl + path

await axios.get(url)

上述示例中，我们先定义了一个apiUrl表示接口的根路径，然后定义了一个path表示具体的路径，最后将它们拼接成url。然而，这种拼凑方式是错误的。因为apiUrl的最后没有斜杠（/），而path的开头也没有斜杠（/），导致拼接后的url是错误的。

解决方案

要解决这个问题，我们需要确保拼接出来的url是正确的。一种简单有效的方式是使用前端路由工具vue-router提供的路由拼接功能。下面是一个修正后的示例：

// 正确的url拼凑方式
import router from 'vue-router'

const apiUrl = '/api'
const path = '/user'
const url = router.resolve({ path: path }).href

await axios.get(apiUrl + url)

上述示例中，我们使用了vue-router提供的resolve函数，将path转换成了一个正确的url。然后我们再将它拼接到apiUrl上，保证了最终的url是正确的。这样我们的请求就能够正确发起了。

总结

在使用vue-element-admin进行开发时，我们需要注意请求路径的拼凑。错误的路径拼凑会导致请求失败，因此我们需要采取正确的方式来拼接url。本文介绍了一种通过vue-router进行路由拼接的方式，来确保拼接出来的url是正确的。希望本文能够帮助到遇到类似问题的开发者。

欢迎访问我的博客 link 获取更多关于vue-element-admin和前端开发的相关内容。

参考资料

• vue-element-admin官方文档

本文来自极简博客，作者：梦幻舞者，转载请注明原文链接：vue-element-admin发起请求，请求路径拼凑不正确