vue3中hash和history的区别

在 Vue3 中，hash 模式和 history 模式是两种不同的前端路由模式，它们的区别主要体现在以下方面：
 
URL 表现：
 
- hash 模式：URL 中包含 # 号，例如 http://example.com/#/about 。
- history 模式：URL 看起来和普通的 HTTP URL 一样，没有 # 号，例如 http://example.com/about 。
 
原理：
 
- hash 模式：通过改变 location.hash （只改变 URL 的 hash 值而不是主体部分），然后由浏览器监听 onhashchange 事件来监听 hash 值的变化，并触发绑定的回调函数，从而展示不同的页面内容。
- history 模式：利用了 HTML5 history interface 中新增的 pushState 和 replaceState 方法来改变 URL（可以改变主体部分），通过 window.popstate 事件来监听 URL 变化并执行对应的回调函数，从而展示不同的页面内容。
 
性能：
 
- history 模式在部分浏览器中可能会有一些性能问题，例如重复的 pushState 调用。
 
兼容性：
 
- hash 模式兼容性更好，可达到 IE8。
- history 模式的兼容性到 IE10。
 
服务器端要求：
 
- hash 模式不需要服务器端进行特殊配合，因为 # 后面的内容不会被发送到服务器。
- history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。如果访问的路由地址在服务器中不存在，会报 404 错误，需要服务器端进行相应配置（当 URL 匹配不到任何静态资源时，返回同一个 index.html 页面）。
 
其他特性：
 
-  pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只能修改 # 后面的部分，只能设置与当前 URL 同文档的 URL。
-  pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
-  pushState 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串。
-  pushState 可额外设置 title 属性供后续使用。
 
在实际开发中，可根据项目需求和场景来选择合适的模式。如果对 URL 的美观性要求较高，且项目不需要兼容低版本的 IE 浏览器，通常会选择 history 模式。但需注意做好服务器端的配置，以处理可能出现的 404 错误。如果需要更好的兼容性，或者项目较为简单，对 URL 外观要求不那么严格，hash 模式也是一个可行的选择。