Vue Router未实现地址栏输入错误地址重定向问题求助

嘿，这个坑我刚接触Vue Router的时候也踩过！咱们一步步来理清楚原因和解决办法：

问题根源 #

你用了mode: "history"模式，这个模式会去掉URL里的#，让路由看起来更像传统的后端路由。但这里有个关键区别：

• 编程式跳转（比如this.$router.push）：是在Vue应用内部完成的，完全由Vue Router接管，所以你的通配符路由{ path: "*", redirect: "/" }能正常工作，把错误路径重定向到首页。
• 直接在地址栏输入URL（比如http://localhost/wrong）：浏览器会直接向服务器发起一个HTTP请求，请求/wrong这个路径。而你的服务器并没有配置处理这个路径的规则，所以返回了Cannot GET /wrong的404错误，根本没轮到Vue Router处理这个请求，自然也触发不了你的重定向规则。

解决方案 #

我们需要让服务器把所有前端路由相关的请求都转发到index.html（Vue应用的入口文件），这样Vue Router就能接管这些请求，然后执行你的重定向规则。

1. 开发环境（Vue CLI）

如果你用的是Vue CLI的开发服务器，只需要在项目根目录的vue.config.js里添加devServer.historyApiFallback配置：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

保存后重启开发服务器，再直接输入错误地址，就能正常重定向到首页了。

2. 生产环境（常见服务器配置）

根据你部署的服务器类型，需要做对应的配置：

Nginx

修改你的Nginx配置文件，在对应的server块里添加：

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

这个规则的意思是：先尝试找请求的文件或目录，如果找不到，就返回index.html，让Vue Router处理路由。

Apache

在项目根目录创建.htaccess文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

确保Apache开启了mod_rewrite模块，这样所有不存在的文件/目录请求都会被转发到index.html。

补充说明 #

如果不想这么麻烦，也可以把路由模式改回hash（默认模式），这样地址栏里会有#，浏览器不会向服务器发起真实请求，所有路由都由Vue Router处理，但URL会多一个#，美观性稍差。不过从用户体验来说，history模式配合后端配置是更好的选择。

内容的提问来源于stack exchange，提问作者charlycou