锚点跳转不改变History

业务场景:在写Webapp的过程中遇到了一个这样的问题,有一个表单提交需要走数据校验,必填选项没有填的需要定位到对应的地方去

看到这个需求的时候第一个想到的就是用锚点,把表单控件上定义一个ID就直接跳过去了,这样做完后才发现有一个问题

使用锚点跳转会记录浏览器的history,当点击浏览器的返回键或者使用 go(-1) 返回上一个页面的的时候返回的是上一个锚点

而不是返回到对应的页面去。

解决办法:scrollIntoView()

scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。

 详细可见MDN介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

    setScrollTop (id) {
      this.$nextTick(() => {
        document.querySelector(`#${id}`).scrollIntoView()
      })
    }

  最后使用scrollIntoView() 后点击浏览器后退与go(-1)就正常了

原文地址:https://www.cnblogs.com/NiuBiHH/p/15243726.html