hash路由模式
- URL 中的 hash 值只是客户端的一种状态,向服务端发送请求的时候,hash 部分不会被发送;
- hash 值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退、前进控制 hash 值的改变;
- 可以通过 a 标签设置 href 值或者通过 js 给location.hash 赋值来改变 hash 值;
- 可以通过
hashchang
事件来监听 hash 值的变化,从而对页面进行跳转(渲染);
history路由模式
HTML5提供了 history API 来实现 URL 的变化,其中最主要的 API 有以下两个:history.pushState()
和 history.replaceState()
。这两个API 可以在不刷新的情况下操作浏览器的历史记录,不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。
- 通过 pushState 和 replaceState 两个API 来操作实现 URL 的变化;
- 可以通过
popstate
事件来监听 URL 的变化,从而对页面进行跳转(渲染); history.pushState()
或history.replaceState()
不会触发popstate
事件,需要手动触发页面跳转;- 需要后台配置支持;