vue-router两种路由模式实现原理

　　Vue Router 支持两种路由模式：Hash 模式和 History 模式。

　　1.哈希模式

　　Hash 模式是通过改变 URL 中的 hash(#)来实现路由的。例如：

http://example.com/#/about

　　在这个 URL 中，# 后面的 /about 就是路由的路径。当我们点击页面中的链接或调用 router.push() 方法时，Vue Router 会将新的路由添加到 URL 中的 hash 后面，浏览器会自动滚动到页面中相应的位置，并触发相应的组件渲染。

　　Hash 模式的实现原理很简单：Vue Router 监听浏览器的 hashchange 事件，然后根据当前的 hash 值匹配路由表中的相应路由，并触发相应的组件渲染。

　　2.历史模式

　　History 模式是通过 HTML5 中的 history API 来实现路由的。例如：

　　在这个 URL 中，/about 就是路由的路径。当我们点击页面中的链接或调用 router.push() 方法时，Vue Router 会使用 history.pushState() 方法将新的路由添加到浏览器的历史记录中，并触发相应的组件渲染。

　　History 模式的实现原理也很简单：Vue Router 使用 history.pushState() 方法将新的路由添加到浏览器的历史记录中，然后通过监听 popstate 事件来响应浏览器的前进和后退按钮。当用户点击前进或后退按钮时，Vue Router 根据当前的 URL 匹配路由表中的相应路由，并触发相应的组件渲染。

　　需要注意的是，使用 History 模式时，需要在服务器端进行相应的配置，以确保在用户直接访问路由时可以正确地返回对应的页面。