vue-router中常用的hash和history路由模式的实现原理?

818 阅读1分钟

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事件,因此我们需要手动触发页面跳转渲染。