这两种模式都是属于前端路由。前端路由,顾名思义,前端使用的路由,路由不会触发向后端请求的操作,而只是为了管理前端页面。当路由路径改变时,加载相应的内容。
一、hash模式
- url中会带有
#
- 本质是使用
window.onhashchange
来监听url的变化(本质是#
后边内容的变化),并根据url的不同加载相应内容
二、history模式
- url不含
#
,比较优雅 - 本质是使用H5引入的
window.history
那一套东西来实现
(1)length: 当前历史记录列表的长度
(2)state: 当前历史记录的state属性,可以用于区分或管理不同历史记录
(3)pushState(state, title, url):清空当前历史记录之后的所有历史记录,并新增一条历史记录。
(4)replaceState(state, title, url):修改当前历史记录
前进后退的实现
(5)back():回退一页
(6)forward():前进一页
(7)go(number):回退或前进n页,number不存在或越界时,无反应。0为刷新当前页。