Vue Router Hash与History

YuXiang

引言

在前端开发中，路由管理是构建单页面应用（SPA）的核心部分。Vue Router作为Vue.js官方的路由管理器，提供了两种路由模式：Hash模式和History模式。这两种模式的核心区别在于如何在浏览器中管理 URL 的变化，尤其是在 URL 路径与页面的映射关系上。下面我们从这两种模式的底层实现、优缺点及 Vue 配备的 Vue Router 的优势进行详细分析。

1. Hash模式与History模式的区别

1.1 Hash模式

Hash模式是通过 URL 中的 # 字符来模拟不同的路由。浏览器的哈希值不会引起页面的重新加载，浏览器会将 URL 中的 # 后的部分作为页面的一部分进行处理，通常通过 JavaScript 来控制页面的更新。

特点：

URL格式：http://wyxup.top/#/path
不发送到服务器：浏览器不会将#后面的部分发送到服务器，因此服务器不需要做任何配置。
兼容性好：Hash模式在所有浏览器中都能正常工作，包括一些老旧的浏览器。

优点：

无需额外的服务器配置：由于 # 后的路径并不会真正发送给服务器，所以服务器不需要额外的路由配置来处理 URL。
兼容性好：Hash模式在所有浏览器中都能正常工作，包括一些老旧的浏览器。
简单实现：通过监听 hashchange 事件来切换页面，代码实现较为简单。

缺点：

URL 不美观：URL 中含有 #。
对于SEO不友好，因为搜索引擎通常不会解析#后面的内容，也影响了链接的直观性。
不符合传统的 URL 结构：现代浏览器支持通过 history.pushState 改变 URL，但 Hash 模式依然局限在 # 后面的一部分。

1.2 History模式

History模式利用了HTML5的History API（pushState和replaceState）来实现路由的切换，这允许我们更改浏览器的 URL，而不会引起页面的刷新。每当路由变化时，浏览器的 URL 会发生变化，但页面不会重新加载。这种模式下的URL更加美观，没有#符号。

特点：

URL格式：http://wyxup.top/path
发送到服务器：改变URL的路径部分会发送到服务器，因此需要服务器端进行配置，以避免404错误。
需要HTML5支持：History模式依赖于HTML5的History API，因此在一些老旧浏览器中可能无法正常工作。

优点：

美观的 URL：URL 没有 # 符号，符合传统的路由设计，更加清晰。
更符合现代 Web 标准：pushState 和 replaceState 是现代浏览器的标准 API，可以更好地进行历史记录管理。
支持 SEO：由于 URL 中不包含 #，这更有利于搜索引擎抓取和页面优化。

缺点：

需需要服务器配置：如果用户直接刷新页面，或者直接访问一个深层路径（如 http://wyxup.top/home），服务器必须配置好，确保它不会返回 404 错误。服务器需要返回应用的入口 HTML 页面，并让前端路由接管 URL 的处理。
浏览器兼容性问题：虽然现代浏览器都支持 pushState，但在一些老旧浏览器中可能存在兼容性问题。

2. 在Vue中的实现逻辑

2.1 Hash模式的实现

在Vue Router中，Hash模式是默认的路由模式。它的实现主要依赖于window.location.hash属性。

核心逻辑：

当URL中的hash发生变化时，Vue Router会监听hashchange事件，并根据新的hash值来匹配对应的路由组件。
通过window.location.hash来获取当前的hash值，并通过window.location.hash = newHash来改变hash值。

代码示例：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

2.2 History模式的实现

History模式的实现依赖于HTML5的History API，特别是pushState和replaceState方法。

核心逻辑：

当用户点击链接或调用router.push方法时，Vue Router会调用history.pushState或history.replaceState来改变URL，而不会导致页面刷新。
Vue Router会监听popstate事件，当用户点击浏览器的前进或后退按钮时，会根据当前的URL路径来匹配对应的路由组件。

代码示例：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

2.3 服务器配置

在使用History模式时，服务器需要进行额外的配置，以确保在用户直接访问某个URL时，服务器能够返回正确的页面，而不是404错误。

Nginx配置示例：

1
2
3

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

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>

3. 总结

Hash模式和History模式各有优缺点，选择哪种模式取决于具体的应用场景和需求。如果应用需要兼容老旧浏览器，或者不希望进行复杂的服务器配置，Hash模式是一个不错的选择。如果应用对URL的美观性和SEO有较高要求，并且能够进行服务器配置，那么History模式更为合适。