前端路由
路由是spa应用很强大的一个地方,可以在一个页面通过不同的url展示不一样的内容,不管是vue还是react,实际上都是根据hash和history的特性来实现的路由系统,他们的最大的特性,都是可以通过改变url的同时不刷新页面展示。
hash
从以前古老的a标签增加锚点定位到页面上的某一个位置,其实就是最开始常用的用法。比如:1
2
3<a href="#/someWhere"></a>
<!--比如://https://github.com/bibi7/fe-daily-increase/issues/#/someWhere-->
可以采用onhashchange
的方式监听hash变化
history
history
同样也可以用来进行url的增改,不过可能语法上有点不一样。一般来说常用的有:1
2history.pushState({}, null, path)
history.replaceState({}, null, path);
和hash不同的是,history触发的url变化没办法监听到。另外,二者在进行浏览器前进后退的时候,都可以采用监听popstate
的方式。
实现一个基于react的简易版本:
1 | //思路: |
简易版效果: