上周所接到的一个优化需求,将用户在页面的一些操作回显在 url 中。
最开始考虑的是使用vue 中的动态路由,通过 vue router push 进去一个路由,但是后面发现,通过 vue router 改变路由会涉及到当前页面的重新刷新。 这种重新刷新会降低用户体验,所以不能采取 vue router 改变路由的方式。
最后发现了 window 下的 history 对象中的 replacestate 方法来改变当前的 url。
history 对象:参考 mdn 的 history API:
History API - Web API 接口参考 | MDN
其中,pushstate 和 replacestate 方法是 h5 中的新方法。
history.replaceState()
的使用与history.pushState()
非常相似,区别在于replaceState()
是修改了当前的历史记录项而不是新建一个。注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
replaceState()
的使用场景在于为了响应用户操作,你想要更新状态对象 state 或者当前历史记录的 URL。
replacestate 的使用场景,就是响应用户操作,来更新当前历史记录的 url。 与我们的需求契合。 所以就使用这个啦。