前端面试题154（详解vue路由hash和history）

Vue.js 应用程序通常使用 Vue Router 进行导航和页面管理。Vue Router 提供了两种路由模式：hash 和 history。下面我会详细介绍这两种模式的工作原理、优缺点以及如何在项目中配置它们。

1. Hash 模式

工作原理：
在 URL 中，# 后面的内容称为哈希（或片段标识符）。浏览器不会将这部分内容发送到服务器，因此当 URL 改变时，页面不会重新加载。Vue Router 的 hash 模式就是利用这一点来实现客户端路由的。当你点击一个链接时，Vue Router 会改变 URL 的哈希值，然后监听哈希值的变化来显示对应的内容。

示例 URL：

http://example.com/#/home

优点：

• 兼容性好：支持所有浏览器，包括不支持 HTML5 History API 的老版本浏览器。
• 无需后端配置：因为 URL 变化仅在哈希部分，对服务器来说 URL 是不变的，所以不需要任何后端配置。

缺点：

• 不够美观：URL 中包含 #，可能影响用户体验和 SEO。
• 部分服务端框架可能不识别：如 Angular Universal 等服务端渲染框架默认不处理哈希路由。

2. History 模式

工作原理：
HTML5 引入了 History API（包括 pushState, replaceState 方法），允许在不刷新页面的情况下修改浏览器的历史记录。Vue Router 的 history 模式就是基于此 API 实现的。它会把路径当作正常的 URL 路径，没有 #。当用户访问一个新路径时，前端路由会拦截这个请求，然后根据路径变化来切换视图，同时使用 History API 更新浏览器的 URL，而不会向服务器发起请求。

示例 URL：

http://example.com/home

优点：

• URL 更美观：没有 #，看起来更像传统的服务器端渲染的 URL。
• 提升 SEO：虽然单页应用的 SEO 主要还是依赖于服务端渲染或预渲染，但干净的 URL 对 SEO 有一定帮助。

缺点：

• 需要后端配置：为了防止用户直接访问这些不存在的 URL 时返回 404 错误，服务器需要配置回退到应用的入口页面（通常是 index.html），以便 Vue Router 可以接管并展示正确的内容。
• 不支持旧浏览器：不支持不支持 HTML5 History API 的浏览器。

配置示例

在 Vue Router 的配置文件（通常是 router/index.js）中，你可以通过 mode 属性来选择路由模式：

Hash 模式（默认）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    // ...你的路由配置
  ]
})

History 模式

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history', // 添加这一行来启用 history 模式
  routes: [
    // ...你的路由配置
  ]
})

记得，如果选择了 history 模式，确保你的服务器已正确配置以避免 404 错误。例如，在 Nginx 中，可以这样配置：

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

这会告诉 Nginx，如果请求的文件或目录不存在，就返回 index.html，让 Vue Router 处理路由。