Vue Router 中的 Hash 模式与 History 模式

在 Vue.js 开发中，Vue Router 是用于实现单页应用（SPA）路由管理的核心工具。Vue Router 提供了两种路由模式：hash 模式和 history 模式。本文将详细介绍这两种模式的特点、使用方法以及如何选择适合自己项目的模式。

一、什么是 Hash 模式？

hash 模式是 Vue Router 的默认路由模式。它的 URL 中会带有一个 # 符号，# 后面的部分被称为哈希值，用于表示路由路径。

1、Hash 模式的 URL 示例

假设我们有一个 Vue 应用，配置了以下路由：

javascript 复制代码

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

使用 hash 模式时，URL 会显示为以下形式：

首页：http://example.com/#/
关于页：http://example.com/#/about
联系页：http://example.com/#/contact

2、Hash 模式的特点

URL 中带有 # 符号 ：# 后面的内容不会发送到服务器，适合单页应用。
无需服务器配置 ：hash 模式完全由前端处理，服务器无需额外配置。
兼容性好：支持所有浏览器，包括不支持 HTML5 History API 的旧浏览器。

3、如何启用 Hash 模式

在 Vue Router 中，hash 模式是默认模式，因此无需额外配置。如果需要显式声明，可以这样写：

javascript 复制代码

const router = new VueRouter({
  mode: 'hash', // 默认就是 hash 模式
  routes
});

二、什么是 History 模式？

history 模式利用 HTML5 的 History API（pushState、replaceState 等）来实现路由，URL 中没有 # 符号，看起来更加简洁和现代化。

1、History 模式的 URL 示例

同样以上面的路由配置为例，使用 history 模式时，URL 会显示为以下形式：

首页：http://example.com/
关于页：http://example.com/about
联系页：http://example.com/contact

2、History 模式的特点

URL 中无 # 符号：URL 更加简洁，更符合传统 URL 格式。
需要服务器支持 ：由于 history 模式的路径是真实的 URL，如果用户直接访问或刷新页面，服务器需要正确返回 index.html，否则会返回 404 错误。
现代浏览器支持：需要浏览器支持 HTML5 History API（现代浏览器都支持）。

3、如何启用 History 模式

在 Vue Router 中启用 history 模式，只需将 mode 设置为 history：

javascript 复制代码

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

4、服务器配置

为了避免刷新页面时返回 404，需要在服务器上配置一个回退规则，将所有路由指向 index.html。以下是常见服务器的配置示例：

Nginx:

text 复制代码

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

Apache:

xml 复制代码

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

三、Hash 模式与 History 模式的对比

特性	`hash` 模式	`history` 模式
URL 格式	带 `#`，如 `http://example.com/#/about`	无 `#`，如 `http://example.com/about`
服务器配置	无需额外配置	需要配置回退规则，将所有路由指向 `index.html`。
兼容性	兼容所有浏览器，包括旧浏览器。	需要支持 HTML5 History API 的浏览器（现代浏览器都支持）
SEO 友好性	较差（搜索引擎可能忽略 `#` 后的内容）	较好（URL 更友好，有利于 SEO）
适用场景	简单应用、旧浏览器支持	现代应用、需要干净的 URL

四、如何选择适合的模式？

如果你的项目是简单的单页应用，或者需要兼容旧浏览器，推荐使用 hash 模式。它的开发和部署更加简单，无需额外配置服务器。
如果你的项目是现代应用，且对 URL 美观和 SEO 有较高要求，推荐使用 history 模式。虽然需要服务器配置，但它能提供更好的用户体验和 SEO 效果。