vue-router 中常用的 hash 和 history 路由模式实现原理

Vue-Router 中常用的 hash 和 history 路由模式实现原理如下：

1. Hash 模式：在这种模式下，URL 中带有一个 # 符号，后面跟随的是路径部分。例如：http://example.com/#/home。在 Vue-Router 中，Hash 模式是默认模式。

实现原理：当页面的 URL 发生变化时，浏览器会发送一个带有 # 的请求到服务器。浏览器不会重载页面，而是通过监听 hashchange 事件来改变页面内容。Vue-Router 利用了这一特性，在初始化时会监听浏览器的 hashchange 事件，并根据 URL 中的 hash 值来匹配对应的路由，然后渲染相应的组件。

1. History 模式：在这种模式下，URL 中没有 # 符号，路径部分更加清晰。例如：http://example.com/home。

实现原理：History 模式利用了 HTML5 中的 History API，包括 pushState()，replaceState() 和 popstate 事件。当用户点击链接或执行 JavaScript 代码改变页面 URL 时，Vue-Router 会调用浏览器的 pushState() 或 replaceState() 方法来修改 URL，并通过监听 popstate 事件来响应 URL 的变化。这样就可以实现在 URL 改变时，无需刷新页面就能渲染相应的组件。

需要注意的是，在使用 History 模式时，需要确保服务器端配置正确，因为直接访问 URL 时，服务器需要返回对应的 HTML 文件，否则会导致 404 错误。