vue3 接口获取动态路由，页面刷新就404

2023-12-12 10:39:29 阅读：169 来源： 互联网

标签：

在 Vue 3 中，如果你使用动态路由并在页面刷新后遇到 404 错误，可能是由于前端路由和后端服务器之间的配置问题。下面是一些可能的解决方案：

服务器配置：确保你的服务器（如 Nginx 或 Apache）已正确配置以处理动态路由。例如，对于 Nginx，你可以添加以下配置来处理任意路径的请求：

location / {
  try_files $uri $uri/ /index.html;
}

nginx

这将指示服务器将所有请求重定向到 index.html，使得前端路由可以正确处理这些请求。

使用哈希模式：Vue Router 默认使用的是 HTML5 History 模式，它使用的是 history.pushState() API 来更改路由，这可能在刷新页面后导致 404 错误。你可以尝试使用哈希模式来解决这个问题。在你的路由配置中，将 mode 设置为 'hash'：

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

JavaScript

这样，每次路由更改时，URL 将包含一个哈希值（例如 http://example.com/#/route），在刷新页面后也能正确加载对应的组件。

确保接口请求正确处理动态路由参数：如果你的动态路由参数是通过接口获取的，确保你的接口能够正确处理这些参数并返回对应的页面数据。如果接口在刷新页面后返回 404 错误，你可能需要检查服务器端的路由配置和数据处理逻辑。

通过检查服务器配置和接口处理逻辑，并根据需要使用哈希模式，你应该能够解决在 Vue 3 中刷新页面导致的 404 错误问题。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 接口获取动态路由，页面刷新就404