框架

109 阅读1分钟

1. vue-router react-router原理

vue-router

  1. 什么是前端路由? 在前端单页应用中,前端路由描述了URL与UI之间的映射关系,这种映射是单向的,即URL变化引起UI的更新

  2. 如何实现前端路由? 实现前端路由需要解决两个核心问题: 1. 如何改变URL而不引起页面刷新 2. 如何监测到URL变化了

  3. 解决方案主要是: hash以及history hash实现

  4. hash是URL的中hash(#)后面的部分,常用作锚点在页面内进行导航,改变URL中的hash部分不会引起页面刷新。

  5. 通过hashchange事件监听URL的变化,改变URL的变化的方式有:

  • window.location改变
  • 通过a标签改变
  • 通过浏览器前进后退改变url history实现
  1. history提供了pushState和replaceState的方法,这两个方法改变URL的path部分不会引起页面刷新
  2. history提供类似hashchange事件的popstate事件。
  • 通过浏览器前进后退可以触发popstate事件
  • 通过pushState或者replaceState或者是a标签不会触发popstate事件,但是可以通过拦截pushSate和repaceState事件以及a标签的点击事件来监测URL的变化
  • 通过Js调用history的 forward, back, go方法可触发该事件