hash模式
URL
URL后面会跟一个 #，例如：
http://example.com/#about
工作原理
基于浏览器的 location.hash 属性，该属性可获取 url 中 # 后面的部分。
当 URL 中的 hash 部分发生变化时，Vue Router 会监听到这个变化，并相应地切换视图。
好处
hash 模式不需要后端支持，即：部署到 Nginx、apache、tomcat时，不需要额外配置
浏览器兼容性较好，支持不同的浏览器
缺点
URL 美观度： URL 中带有 # 符号，可能不够美观。
SEO 不友好： 对搜索引擎的优化相对较差，因为搜索引擎不会将哈希部分的内容作为独立的页面来处理。
应用场景
hash 模式通常用于 前端路由，不需要配置服务器
history模式
URL
看起来和普通的 HTTP URL 一样，例如：
http://example.com/about
工作原理
History 模式使用浏览器的 History API，通过修改浏览器的历史记录来实现前端路由的切换。在这种模式下，需要确保在任何路径下都返回同一个 HTML 文件，以便 Vue Router 能够正确处理路由。
好处
URL 美观度： URL 不带有 # 符号，看起来像传统的网站
SEO 友好： 对搜索引擎的优化更好，因为搜索引擎能够更好地处理没有哈希部分的 URL
缺点
浏览器兼容性不好，HTML5之后支持
刷新页面 或 直接访问某个路由时，需要后端支持，即：部署到 Nginx、apache、tomcat时，需要额外配置服务器
原因： 比如访问下面链接：
http://example.com/about
web服务器会找 about 目录下的默认首页：index.html 等
由于 /about 是vue的路由，根本 不存在上面的目录和文件，随意会报错 404
选择
若没特殊需求，用
hash模式即可，简单方便，部署时不需要配置服务器如果想路径中没有
#，更好的 SEO，则选择history模式（部署时，需要配置服务器）
参考：
https://blog.csdn.net/weixin_42554191/article/details/136546714
https://www.quanxiaoha.com/vue3/vue3-router-mode.html