vue2页面数据回填后不回到顶部

页面数据回填后会在底部，我遇到的有两种情况

1.路由问题

    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }

在路由中添加，跳转路由后页面会在顶部开始显示，可以解决一部分问题

具体位置

  new Router({
    // mode: 'history', // require service support
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    },
    routes: [...constantRoutes, ...privateRoutes]
    // ,
  })

2. 页面内容获得了焦点导致

在vue页面渲染中，我使用了富文本编辑器，导致页面一开始显示在顶部，但会跳到页面获得焦点的地方

解决办法 ： 在获得数据回填后失去焦点

// 富文本编辑器自动获取焦点处理
      this.$nextTick(function () {
        this.$refs.myQuillEditor.quill.enable(true)
        this.$refs.myQuillEditor.quill.blur()
        // 失去焦点后回到页面顶部
        window.scrollTo(0, 0)
      })

例如1：

async editShowDialogFN(data) {
  try {
    // 发起请求
    const res = await articleDetailAPI(data)
    // 请求成功后数据回填
    this.formDialog = res.data
    // 富文本编辑器自动获取焦点处理
    this.$nextTick(function() {
      this.$refs.myQuillEditor.quill.enable(true)
      this.$refs.myQuillEditor.quill.blur()
    })
  } catch (error) {
    console.error(error)
  }
}

例如2：

    // 文本改变后同步回父组件绑定的值
    onEditorChange(event) {
      // console.log(event.html)
      this.$emit('update:value', event.html)
      this.$emit('input', event.html)
      // 富文本编辑器自动获取焦点处理
      this.$nextTick(function () {
        this.$refs.myQuillEditor.quill.enable(true)
        this.$refs.myQuillEditor.quill.blur()
        window.scrollTo(0, 0)
      })
    }