锚点跳转不改变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)就正常了