在 Vue 3 使用 vue-router 时，如果直接使用普通的 <a> 超链接跳转到其他路由地址，可能会导致页面刷新，并出现 “404 Not Found” 错误。这通常是因为在使用 vue-router 时，Vue 应用程序本身是一个单页应用程序（SPA），而普通的 <a> 标签会触发浏览器的完整页面刷新。

问题原因

1. 普通的 <a> 标签导致完整页面刷新：在单页应用中，Vue 使用 JavaScript 来拦截页面导航并更新页面内容，而不是让浏览器去请求服务器获取新的页面。当你使用 <a> 标签时，浏览器会默认进行完整的页面刷新，并尝试在服务器上寻找对应的资源，而这些资源通常在 Vue 的 SPA 应用中是不存在的。

2. 服务器配置不正确：如果你在使用 HTML5 的 history 模式（通过 createWebHistory()），则服务器需要配置所有路由请求都返回 index.html。否则，刷新或直接访问特定的 URL 时，会导致服务器返回 404。

解决方法

有几种方法可以解决这个问题：

1. 使用 <router-link> 组件

在 Vue 3 中，推荐使用 vue-router 提供的 <router-link> 组件来进行页面导航。<router-link> 会被渲染成一个 <a> 标签，但它会拦截点击事件并防止浏览器刷新页面。

示例：

这里的 to 属性可以是字符串形式的路径，也可以是对象形式，支持动态参数和查询参数。

2. 使用 router.push 或 router.replace 进行编程式导航

你还可以在方法中使用 useRouter 钩子进行编程式导航。通过 router.push 或 router.replace，你可以在不刷新页面的情况下进行路由跳转。

示例：

3. 配置服务器来支持 HTML5 History 模式

如果你正在使用 createWebHistory() 模式，你需要配置服务器来处理未找到的路径。以下是一些常见服务器的配置示例：

• Nginx 配置示例：

  nginx

  复制代码

  location / {

  try_files $uri $uri/ /index.html;

  }

• Apache 配置示例（在 .htaccess 文件中）：

  apache

  复制代码

  <IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

  </IfModule>

这将确保无论用户直接访问哪条路径，服务器都会返回 index.html 文件，并由前端的 vue-router 处理路由逻辑。

4. 在 <a> 标签中使用 @click.prevent 手动处理导航

如果你一定要使用 <a> 标签，可以通过使用 @click.prevent 事件修饰符手动阻止默认行为，然后使用 router.push 实现导航。

示例：

总结

• 推荐使用 <router-link> 组件来代替普通的 <a> 标签进行导航。
• 使用 router.push 或 router.replace 进行编程式导航。
• 如果使用了 HTML5 History 模式，确保服务器正确配置，以支持所有路由请求返回 index.html。
• 如果必须使用 <a> 标签，使用 @click.prevent 来防止页面刷新。

这些方法可以确保你在 Vue 3 应用程序中进行 URL 跳转时不会遇到 "404 Not Found" 的错误。