vue 路由hash模式和history有什么区别？

1. Hash模式（默认）
   URL结构： 在hash模式下，URL中会包含一个#符号，后面跟着路由的哈希值。例如，访问路径可能是这样的：http://example.com/#/home。

原理： Vue Router通过监听window.onhashchange事件来检测URL中哈希值的变化，并据此切换视图内容。由于哈希（#）后面的内容不会被发送到服务器端，因此这种模式下浏览器并不会发起新的页面请求，所有的路由导航都由前端Vue Router控制。

优点：

不需要服务器配置支持，兼容性较好，所有浏览器都支持。
能够避免因直接修改URL导致的不必要的全页刷新。
缺点：

URL带有#符号，对用户不那么友好，因为从URL中很难看出这是一个单独的页面还是页面内的一个锚点链接。
SEO方面可能存在不足，因为搜索引擎通常不会抓取#后面的内容。
2. History模式
URL结构： 在history模式下，URL看起来更像是正常的、没有哈希的URL，如http://example.com/home。

原理： Vue Router使用HTML5 History API（包括pushState、replaceState和popstate事件）来改变和监听URL。当路由发生变化时，它会改变浏览器的历史记录栈，但并不触发页面刷新。

优点：

更加符合传统的多页面应用URL结构，用户体验更好，且有利于SEO优化，因为搜索引擎可以识别并抓取这些路径作为独立的页面。
缺点：

需要服务器端的支持才能正常工作。当用户直接访问或刷新某个非首页的History模式下的URL时，服务器应该返回对应的HTML文件或者重定向到应用程序的入口点，这样Vue Router才能够正确地接管并渲染相应的组件。
总结来说，选择哪种模式取决于项目需求和环境条件，如果关注SEO和更友好的URL结构，同时愿意配置服务器以支持History模式，则应优先考虑History模式；如果希望保持良好的兼容性和简单的部署流程，而不在意URL中的#，则可以选择Hash模式。