文章目录
  1. 一、hash 模式
    1. 1. 什么是 hash 模式？
    2. 2. 如何配置 hash 模式？
      1. 访问示例：
    3. 3. 优缺点
  2. 二、history 模式
    1. 1. 什么是 history 模式？
    2. 2. 如何配置 history 模式？
      1. 访问示例：
    3. 3. 服务器配置
    4. 4. 优缺点
  3. 三、hash 与 history 模式对比
  4. 四、总结

在 Vue 中，Vue Router 支持两种主要的路由模式：hash 和 history。这两种模式有各自的特点，适用于不同的场景。下面将详细介绍这两种模式的使用方法及其区别。

一、hash 模式

1. 什么是 hash 模式？

hash 模式通过 URL 的 # 符号来模拟不同的路径。浏览器会通过 # 后面的内容来改变页面视图，而不会触发页面的重新加载。

  • 优点：兼容性好，支持所有浏览器。
  • 缺点：URL 中包含 #，不够美观。

2. 如何配置 hash 模式？

在 Vue Router 的配置中，可以通过设置 mode: 'hash' 来启用 hash 模式。以下是配置示例：

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

const router = new Router({
  mode: 'hash', // 默认就是 hash 模式，可以省略这一行
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

export default router

访问示例：

  • http://example.com/#/
  • http://example.com/#/about

3. 优缺点

  • 优点：不需要服务器支持，直接使用浏览器的 hash 路由。
  • 缺点：URL 中会显示 #，不够美观。

二、history 模式

1. 什么是 history 模式？

history 模式使用 HTML5 的 history.pushState API 来改变浏览器的历史记录，不再使用 # 符号，因此 URL 更加干净，类似于传统的多页面应用（MPA）URL。history 模式是现代前端路由的首选。

  • 优点：URL 更加简洁美观，没有 # 符号。
  • 缺点：需要服务器支持，否则直接刷新页面时可能会 404。

2. 如何配置 history 模式？

在 Vue Router 中，设置 mode: 'history' 即可启用 history 模式。同时，服务器需要进行配置，确保刷新时不会出现 404 错误。

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

const router = new Router({
  mode: 'history', // 启用 history 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

export default router

访问示例：

  • http://example.com/
  • http://example.com/about

3. 服务器配置

当使用 history 模式时，刷新页面或直接访问某个 URL 时，服务器需要进行相应配置，保证返回应用的 index.html 文件。否则，刷新时会出现 404 错误。

以常见的 Nginx 为例，配置如下：

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

该配置将确保任何路径都会返回 index.html，由前端路由来处理具体的路径。

4. 优缺点

  • 优点：URL 干净美观，类似传统的多页面应用。
  • 缺点：需要服务器支持，且某些老旧浏览器可能不完全支持 HTML5 History API。

三、hash 与 history 模式对比

特性 hash 模式 history 模式
URL 格式 http://example.com/#/ http://example.com/
服务器要求 无需额外配置 需要配置服务器（防止刷新时 404）
浏览器兼容性 支持所有浏览器 现代浏览器支持较好（需兼容性考虑）
用户体验 URL 中有 # URL 无 #，更简洁美观
SEO 支持 不友好（# 后的内容不参与 SEO） 更友好（无 #，可被爬虫索引）

四、总结

  • hash 模式：简单且兼容性好，适用于不需要服务器支持的场景，尤其是较老的浏览器或较简单的项目。
  • history 模式：更美观，适用于需要 SEO 优化和更好的用户体验的场景，但需要配置服务器支持。

根据你的项目需求，选择适合的路由模式。一般来说，如果是现代单页应用，建议使用 history 模式，并配置服务器以避免刷新时出现 404 错误。如果项目较简单或兼容性要求较高，使用 hash 模式也是可以的。

希望这个解释能帮到你！如果有其他问题或需要更详细的帮助，随时告诉我！