浅谈vue-router中的history模式

vue中的history模式其实是html5中的history对象
我们可以在控制台打印这个对象

我们可以看到熟悉的back forward go pushState replaceState等方法
history中我们每pushState一个url数据就会以栈的形式存储起来

我们都知道栈的特征是先进后出 后进先出
了解这个以后对于history的一些方法调用理解起来就更加直观了

关于pushState的理解
pushState(state,title,url)
1.state是一个js对象，主要是存储一些关于离职记录的信息,不传默认为空
2.title为网页的标题,不传默认为空
3.url为新增的地址

history.pushState('','','home')
history.pushState('','','about')
history.pushState('','','index')
history.pushState('','','main')
//栈中存储顺序 从下至上依次为 home about index main
history.go(-1)和history.back()等价 都会把栈mian弹出
history.go(-2)则弹出 main index 所以执行结果如图

history.forward()可以往前跳转一个页面，与history.back()相对

replaceState()其实是路径替换
假如当前路径为 localhost:8080/main
history.replaceState('','','mypage')
当前路径则变为 localhost:8080/mypage 而之前的main路径则被替换掉了
相当于从栈内删除

最后小结：
forward(),back(),go(),pushState,replaceState等一系列操作都是弹栈和压栈的过程，掌握了原理理解起来其实很简单,今天就先分享到这里,不足之处希望各位大佬批评指正