第70集：Hash模式与History模式

概述

Vue Router 4.x支持两种主要的路由模式：Hash模式和History模式。这两种模式决定了URL的格式以及浏览器如何处理路由跳转。理解它们的区别、优缺点以及适用场景对于构建现代化单页应用至关重要。

核心知识点

1. Hash模式

Hash模式是Vue Router的默认模式，使用URL的hash（#）部分来模拟路由。

工作原理：

URL格式：http://example.com/#/about
浏览器会将#及其后面的内容视为片段标识符，不会发送到服务器
当hash变化时，浏览器不会重新加载页面
通过监听hashchange事件实现路由切换

代码示例：

// router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 路由配置
  ]
})

2. History模式

History模式使用HTML5 History API实现路由，URL更加美观，没有#符号。

工作原理：

URL格式：http://example.com/about
利用history.pushState()和history.replaceState() API修改URL
当用户刷新页面时，浏览器会向服务器发送请求
需要服务器配置支持，否则会返回404

代码示例：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
})

3. 服务器配置

使用History模式时，需要服务器配置fallback选项，确保所有路由请求都返回index.html。

Nginx配置示例：

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>

Vite开发服务器配置：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    historyApiFallback: true
  }
})

4. 两种模式的比较

特性	Hash模式	History模式
URL美观度	差（含#）	好（干净URL）
服务器配置	无需配置	需要配置fallback
SEO友好性	较差	较好
兼容性	所有浏览器	HTML5 History API支持的浏览器
路由参数	通过#传递	通过URL路径传递
刷新页面	正常工作	需要服务器支持

5. 模式选择建议

Hash模式：适用于静态网站、快速原型开发、对URL美观度要求不高的场景
History模式：适用于生产环境、对SEO有要求的应用、需要干净URL的场景

最佳实践

1. 开发环境配置

在开发环境中，使用Vite的historyApiFallback配置确保History模式正常工作：

// vite.config.ts
export default defineConfig({
  server: {
    historyApiFallback: true
  }
})

2. 生产环境部署

确保服务器配置了正确的fallback规则
考虑使用CDN缓存静态资源
对于大型应用，考虑使用SSR（服务端渲染）提升SEO

3. 混合模式应用

在某些复杂场景下，可以考虑混合使用两种模式：

// 根据环境选择模式
const createHistory = process.env.NODE_ENV === 'production' 
  ? createWebHistory 
  : createWebHashHistory

const router = createRouter({
  history: createHistory(),
  routes: [/* ... */]
})

4. 路由前缀配置

在部署到子目录时，可以配置路由前缀：

// Hash模式
const router = createRouter({
  history: createWebHashHistory('/app/'),
  routes: [/* ... */]
})

// History模式
const router = createRouter({
  history: createWebHistory('/app/'),
  routes: [/* ... */]
})

常见问题与解决方案

1. History模式下刷新页面404

问题：使用History模式时，直接访问路由或刷新页面会返回404。

解决方案：

配置服务器的fallback规则，将所有请求指向index.html
确保服务器支持History API

2. Hash模式下URL包含多个#

问题：嵌套路由或动态路由导致URL中出现多个#符号。

解决方案：

检查路由配置，确保没有在path中手动添加#
使用正确的路由跳转方法，避免直接拼接URL

3. SEO优化问题

问题：单页应用的SEO效果不佳。

解决方案：

对于需要SEO的页面，考虑使用SSR或SSG
确保页面内容可以被搜索引擎爬虫正确抓取
使用预渲染技术处理关键页面

进一步学习资源

课后练习

基础练习：
- 创建一个Vue 3项目，分别配置Hash模式和History模式
- 观察两种模式下URL的变化
- 尝试直接访问路由地址，验证服务器配置
进阶练习：
- 部署一个使用History模式的应用到GitHub Pages
- 配置自定义域名和HTTPS
- 测试不同场景下的路由跳转
性能优化：
- 使用Lighthouse分析两种模式下的性能差异
- 实现基于环境的动态模式切换
- 配置路由前缀，部署到子目录

通过本节课的学习，你应该能够熟练掌握Vue Router的两种模式，并根据项目需求选择合适的路由模式，同时了解服务器配置的重要性。