vue3项目history模式路由跳转后回到页面顶部

可以在路由切换时，监听路由变化，然后使用 `window.scrollTo()` 方法将页面滚动到顶部。

具体实现方法如下：

1. 在组件中引入 `reactive` 和 `onMounted` 两个函数：

   import { reactive, onMounted } from 'vue'

2. 在组件中定义一个存储页面滚动位置的对象：

   const scrollPosition = reactive({
     x: 0,
     y: 0
   })

3. 在组件中使用 `onMounted` 函数，监听页面加载完成后的事件，记录当前页面的滚动位置：

   onMounted(() => {
     scrollPosition.x = window.pageXOffset
     scrollPosition.y = window.pageYOffset
   })

4. 在组件中使用 `$router.afterEach()` 函数，监听路由变化后的事件，将页面滚动到顶部：

   $router.afterEach(() => {
     window.scrollTo(0, 0)
   })

5. 在组件中使用 `$nextTick()` 函数，等待页面渲染完成后，将页面滚动到之前的位置：

   $nextTick(() => {
     window.scrollTo(scrollPosition.x, scrollPosition.y)
   })

完整代码如下：

<template>
  <div>
    // 组件内容
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'

export default {
  name: 'MyComponent',

  setup() {
    const scrollPosition = reactive({
      x: 0,
      y: 0
    })

    onMounted(() => {
      scrollPosition.x = window.pageXOffset
      scrollPosition.y = window.pageYOffset
    })

    $router.afterEach(() => {
      window.scrollTo(0, 0)
    })

    $nextTick(() => {
      window.scrollTo(scrollPosition.x, scrollPosition.y)
    })

    return {}
  }
}
</script>