Vue Router 路由模式深度解析：Hash vs History，选型与避坑指南

在 Vue 项目开发中，路由是不可或缺的一部分。Vue Router 提供了两种主要的路由模式：hash 模式和 history 模式。理解这两种模式的底层原理，并在实际项目中根据需求选择合适的模式，对于项目的稳定性和用户体验至关重要。尤其是在涉及到部署到生产环境时，路由配置不当可能导致各种问题。

Hash 模式

原理剖析

Hash 模式利用的是 URL 中的 hash（#）部分进行路由。当 URL 的 hash 部分发生变化时，浏览器不会重新向服务器发起请求，而是触发 hashchange 事件。Vue Router 监听这个事件，然后解析 hash 值，更新视图。

这种模式的优点在于兼容性好，即使服务器没有配置支持单页应用，也能正常工作。因为浏览器不会把 hash 部分发送到服务器，所以服务器不需要做任何特殊处理。 即使部署在宝塔面板的服务器上，不做任何配置也能跑。

代码示例

在 Vue Router 中启用 hash 模式非常简单：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // ...你的路由配置
]

const router = new VueRouter({
  mode: 'hash', // 启用 hash 模式
  routes
})

export default router

优缺点总结

• 优点：
  • 兼容性好，不需要服务器端配置。
  • 简单易用，上手快。
• 缺点：
  • URL 中带有 #，不够美观。
  • 不利于 SEO（搜索引擎优化），因为搜索引擎通常会忽略 hash 部分。

History 模式

原理剖析

History 模式利用的是 HTML5 History API，包括 pushState 和 replaceState 等方法，可以在不刷新页面的情况下修改 URL。当用户点击浏览器前进/后退按钮时，会触发 popstate 事件，Vue Router 监听这个事件，更新视图。

但是，History 模式有一个潜在的问题：当用户直接在浏览器中输入 URL 或者刷新页面时，浏览器会向服务器发起请求。如果服务器没有配置支持单页应用，就会返回 404 错误。

服务器端配置

为了解决 History 模式下的 404 问题，需要在服务器端进行配置，将所有未匹配到的请求重定向到 index.html 文件。这样，Vue Router 才能接管路由。

• Nginx 配置：

server {
    listen 80;
    server_name yourdomain.com; # 修改为你的域名

    location / {
        root /path/to/your/dist; # 修改为你的项目dist目录
        index index.html index.htm;
        try_files $uri $uri/ /index.html; # 关键配置
    }
}

这段 Nginx 配置使用了 try_files 指令，它会依次尝试访问请求的 URI、URI 加上 /，以及 /index.html。如果前两者都不存在，就返回 /index.html，交给 Vue Router 处理。

需要注意的是，Nginx 的 worker_processes 和 worker_connections 等参数，会影响服务器的并发连接数。对于高并发的场景，需要根据服务器的硬件资源进行调整，同时可以考虑使用 Nginx 的反向代理和负载均衡功能，提高系统的可用性和可扩展性。

对于使用宝塔面板的用户，可以在宝塔面板的网站配置中找到“伪静态”设置，将上面的 Nginx 配置复制进去即可。

• Apache 配置：

<Directory /path/to/your/dist>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

<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 模块。

代码示例

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // ...你的路由配置
]

const router = new VueRouter({
  mode: 'history', // 启用 history 模式
  routes
})

export default router

优缺点总结

• 优点：
  • URL 美观，符合用户习惯。
  • 有利于 SEO。
• 缺点：
  • 需要服务器端配置支持。
  • 兼容性相对较差，需要浏览器支持 HTML5 History API。

实战避坑经验

1. 服务器端配置是关键：使用 History 模式时，一定要确保服务器端配置正确，否则会出现 404 错误。
2. 考虑兼容性：对于需要兼容老版本浏览器的项目，建议使用 Hash 模式。
3. 部署环境差异：不同的部署环境可能需要不同的服务器配置，例如 Docker 容器内部和外部的访问路径可能不同。
4. Nginx 配置缓存：在修改 Nginx 配置文件后，需要重启 Nginx 服务或者重新加载配置，使配置生效。可以使用 nginx -s reload 命令重新加载配置，避免服务中断。

路由模式选择建议

• 如果项目对 SEO 有较高要求，且服务器端可以进行配置，建议使用 History 模式。
• 如果项目对兼容性要求较高，或者服务器端配置困难，建议使用 Hash 模式。