我们都知道一个URL代表了网络上唯一的一个资源。这个资源可以是一个页面,一张图片等等。在地址栏里输入一个url地址,浏览器就会将对应的资源展示出来。当在不同的地址之间跳转时,我们很自然地想要回退或者前进一个地址。为了实现这个功能,浏览器厂商定义了history对象。这时的history对象大致有很多方法,用于实现历史记录的访问、跳转。
但是在什么条件下使用什么方法你了解吗?下面带你看几个方法和案例你就明白了。
1.pushState: 使用state objects, title,和 URL 作为参数,向当前浏览器会话的历史堆栈中添加一个状态(state)
2.replaceState: 使用state objects, title,和 URL 作为参数, 修改当前历史记录实体
3.back: 在会话历史记录中向后移动一页。如果没有上一页,则此方法调用不执行任何操作。
4.go: 从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动,具体取决于delta参数的值。
5.forward: 在会话历史中向前移动一页。它与使用delta参数为1时调用 history.go(delta)的效果相同。
这是我们常见的几个属性、路由都有路由栈、栈是先进后出的顺序、但是我们有时候不需要让用户存储当前路由栈、怎么办呐、如果这样说你不明白、那么我用一个案例告诉大家。
1、用户从首页点击商品详情页面、在从详情页面点击到购物车页面、但是用户点击返回上一步、直接返回首页、这个时候应该怎么去做。
原理:这个时候其实是不需要记录路由栈区的、也就是说从路由栈中没有记录详情页面的路由栈、所以点击返回的时候就直接返回上一级的路由栈了。
// 从详情页面点击跳转购物车 backToIndex = () => { history.replace('/shoppingCart'); }
在实际使用中记住、如果不需要记录栈区就使用replace、如果记录就是push、这也是我们常用的路由跳转。