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>