在vue的mounted钩子里面调用window对象滚动到页面顶部的代码未生效

Question

1.我想在页面mounted时调用

window.scrollTo(0,0);

让滚动条回到顶部，但是并没有生效

那我怀疑是文档没有全部渲染完整，我用到了$nextTick，为了观察我让滚动条滚动20px,

 this.$nextTick(()=>{

          console.log('执行nextTick')

          window.scrollTo(0,20)// 未生效，点击浏览器后退按钮回到这个页面滚动条依旧在上个页面所在的位置

        })

上面的代码中页面刷新后打印输入并且滚动条向下20px，但是如果是从某个页面点击浏览器后退按钮回到这个页面的话，虽然有打印输出，但是window.scrollTo(0,20)应该是执行了，但是并没有把滚动条回到20px的位置。

但是如果用setTimeout就可以

mounted(){

        setTimeout(()=>{

          window.scrollTo(0,0)//点击浏览器后退按钮，回到页面后会吧滚动条滚动到20px位置

        },0)

      }

这其中的原因是什么？

Answer 1

vue有它自己的写法：mounted: function () {  this.$nextTick(function () {    // 代码保证 this.$el 在 document 中  })}参考1参考2参考3