前端面试题：hash模式和history模式

hash（哈希）和history(历史)是前端路由的两种模式，它们的主要区别在url，兼容性，服务器配置，美观性，和导航操作上面

1，URL

hash的url前面有#来表示路径，而history没有

hash：

hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式，通过 hashchange 事件监听 hash 值的改变来渲染页面对应的组件。hash 模式不会向后端发送 http 请求，所有的 hash 值操作都与后端无关。

history：

history 是 HTML5 提供的新特性，允许开发者直接更改前端路由，也就是更改 url 地址而无需向后端发送 http 请求。

history 是 window.history 的简写模式，是 History 构造函数的实例化对象。

2，兼容性

hash无需后端配置，可以兼容当前版本较低的浏览器和IE，而history需要浏览器支持html5以上的浏览器和服务器支持

3服务器支持

hash不需要服务器支持，history需要服务器配置来保证子路由返回正确页面，

hash：

当URL发生变化时，浏览器不会向服务器发送请求，而是通过监听 hashchange 事件来捕获URL的变化，并根据哈希值来切换页面内容。哈希模式的优势在于不需要服务器端的特殊配置，可以在静态服务器上直接部署。

history：

History模式使用HTML5的 history.pushState 和 history.replaceState 方法来改变URL，例如： http://example.com/home 。在History模式下，URL的路径部分会与服务器进行交互，因此需要服务器端的支持。当URL发生变化时，浏览器会向服务器发送请求，服务器根据URL返回相应的页面内容。History模式的优势在于URL更加友好，不会包含哈希部分，看起来更加清晰

4，美观性

hash路由路径由#连接，看起来不美观，history没有#看起来干净直观

5，导航操作

hash在改变路由时会触发hashchange事件，可以通过监听hashchange响应路由变化，而history通过historyAPI改变路由，不会触发事件，需要使用编程式导航

解决history模式下页面刷新404问题

原因

因为浏览器在刷新页面时，它会向服务器发送 GET 请求，但此时服务器并没有配置相应的资源来匹配这个请求，因此返回 404 错误。

解决方法

在服务器端进行相关配置，让所有的路由都指向同一个入口文件（比如 index.html），由前端路由来处理 URL 请求，返回对应的页面内容。

在本地调试时，可以在webpack中配置

module.exports = {
  //...
  devServer: {
    historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html
  }
};

在生产环境下

配置方式取决于对应项目使用的服务器环境，常见的有 Apache、Nginx 等

Nginx：

// ...
location / {
	root /opt/nginx/html/;
	try_files $uri $uri/ /index.html; // 按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理;
}

Apache：

在项目目录下新建文件.htaccess文件

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