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 模式时,需要在服务器端进行相应的配置,以确保在用户直接访问路由时可以正确地返回对应的页面。