1.hash模式的实现原理
早期的前端路由的实现是基于location.hash来实现的。
location.hash的值就是url中#后面的内容
原理如下
1.url中的hash值只是客户端的一种状态,也就是当服务器发出请求的时候,hash部分不会被发送。
2.hash值得改变,都会在浏览器的访问中增加一个记录。因此我们可以通过浏览器的回退、前进来控制hash值得变化。
3.可以通过a标签,设置href属性,当用户点击这个标签之后,url的hash值会发生改变;或者使用JavaScript来对location.hash进行赋值,改变url的hash值。
4.我们可以使用hashchange事件来监听hash值的变化。从而对页面进行跳转和渲染
history模式的实现原理
HTML5提供了history api 来实现url的变化。
其中主要的api有两个
history.pushState() 和 history.repalceState()
这两个API在不刷新的情况下,操作浏览器的历史记录。唯一不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。
如图所示
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
history路由模式主要是基于下面几个特性
1.pushState和repalceState两个API来操作url的变化。
2.我们可以使用popstate事件来监听url的变化,从而对页面进行跳转和渲染。
3.history.pushState()或history.replaceState()不会触发popstate事件,因此我们需要手动触发页面跳转渲染。