Vue-Router路由模式

在Vue-Router中，有两种路由模式可供选择：hash模式和history模式。它们之间的主要区别在于URL的表现形式和对服务器的要求。

1、hash模式

定义：在hash模式下，URL会以一个#符号开头，后面跟随路由的路径。

例如：http://example.com/#/home。当URL的hash值发生改变时，Vue-Router会检测到变化，并相应地导航到对应的路由。

优点：

• 支持在所有现代浏览器中运行，包括旧版本的浏览器。
• 不需要后端服务器的特殊配置。

缺点：

• URL中包含#符号，不太美观。
• 在SEO（搜索引擎优化）方面不如history模式。

2、history模式

定义：在history模式下，URL会使用真实的URL路径，而不带有#符号。

例如：http://example.com/home。这需要服务器配置，以确保在前端路由变化的时候，服务器能够正确地响应相应的资源请求。

优点：

• URL更加美观，更符合传统URL的形式。
• 在SEO方面更有优势，可以更好地被搜索引擎收录和解析。

缺点：

• 需要服务器的支持，必须通过后端配置，以确保在前端路由变化时服务器能正确响应资源请求。
• 在某些情况下，如果没有正确配置服务器，刷新页面会导致404错误。

3、区别

（1）最直观的区别就是hash路由有一个 # 号，而history是没有的。

（2）改变hash值不会重新加载页面，对传给后端的url没有任何影响，因此不会重新加载页面。

（3）hash路由原理，当hash值发生改变时，并不会向服务器发送请求而是会触发onhashchange事件，从而根据hash值来修改页面内容。

（4）history路由原理，利用window.history（history.pushState或history.replaceState） 相关api实现路由跳转，从而改变页面内容。

（5）history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。