Vue的路由实现：hash模式 和 history模式原理

1. Hash 模式： 在 hash 模式下，URL 中的路由信息会以 # 符号后的内容表示，例如 http://example.com/#/home。当 URL 中的 hash 发生变化时，浏览器不会向服务器发送请求，而是通过监听 hashchange 事件来响应 URL 的变化，并根据新的 hash 值进行路由的切换。

   Vue Router 默认使用 hash 模式。它通过在页面中插入一个隐藏的 iframe，使用 onhashchange 事件监听 URL 的变化。当路由切换时，Vue Router 会根据新的 hash 值匹配对应的路由组件，并将组件渲染到页面中。

   优点：hash 模式在所有浏览器中都能良好地工作，不需要额外的服务器配置。

   缺点：URL 中的 # 符号可能会被视为页面内的锚点，对搜索引擎的友好度较低。

2. History 模式： 在 history 模式下，URL 中的路由信息不再使用 # 符号，而是直接使用正常的 URL 地址，例如 http://example.com/home。当 URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置来确保对任何 URL 请求都返回相同的 HTML 页面，然后由前端路由来处理 URL 的变化。

   在使用 history 模式时，需要在服务器配置中添加一个规则，将所有的 URL 请求重定向到前端的入口页面，例如 index.html。这样，在刷新页面或直接访问某个路由时，服务器会返回入口页面，并由前端路由来处理路由的切换。

   在 Vue Router 中启用 history 模式，需要通过服务器配置来确保所有的 URL 请求都返回入口页面。这可以在 Vue CLI 的配置文件中进行设置，或者通过在服务器上添加相应的规则来实现。

   优点：URL 更加友好，没有 # 符号，更符合正常的 URL 地址格式。

   缺点：需要额外的服务器配置来确保所有的 URL 请求都返回入口页面，否则会出现 404 错误。