vue3滚动条重置

由于单页面应用的原理，使用vue搭建的项目在路由切换时并不会刷新整个页面。因此在有滚动条的页面会存在滚动条不能自动重置的问题。在最近的项目中就遇到了这种问题，因此记录一下。

1.切换路由：

<el-main>
    <!--<router-view />-->
    <router-view v-slot="{ Component }">
        <transition name="fade-slide" mode="out-in" appear>
              <component :is="Component" id="main" />
        </transition>
      </router-view>
</el-main>

onBeforeRouteUpdate((to, from) => {
      // 由于路由设置了0.3s过渡效果，所以此处设置了0.3s定时器。避免页面切换效果突兀。
      setTimeout(() => {
        document.getElementById("main").scrollIntoView({
              behavior: "smooth",
              block: "start",
        });
      }, 300);
})

2.el-table

<el-table ref="tableRef"></el-table>

onUpdated(() => {
    console.log(tableRef.value)
    if(tableRef.value != null) {
        tableRef.value.setScrollTop(0)
        tableRef.value.setScrollLeft(0)
    }
})