1. vue-router react-router原理
-
什么是前端路由? 在前端单页应用中,前端路由描述了URL与UI之间的映射关系,这种映射是单向的,即URL变化引起UI的更新
-
如何实现前端路由? 实现前端路由需要解决两个核心问题: 1. 如何改变URL而不引起页面刷新 2. 如何监测到URL变化了
-
解决方案主要是: hash以及history hash实现
-
hash是URL的中hash(#)后面的部分,常用作锚点在页面内进行导航,改变URL中的hash部分不会引起页面刷新。
-
通过
hashchange事件监听URL的变化,改变URL的变化的方式有:
- window.location改变
- 通过a标签改变
- 通过浏览器前进后退改变url history实现
- history提供了pushState和replaceState的方法,这两个方法改变URL的path部分不会引起页面刷新
- history提供类似hashchange事件的popstate事件。
- 通过浏览器前进后退可以触发popstate事件
- 通过pushState或者replaceState或者是a标签不会触发popstate事件,但是可以通过拦截pushSate和repaceState事件以及a标签的点击事件来监测URL的变化
- 通过Js调用history的 forward, back, go方法可触发该事件