vue3 路由切换后让页面返回到顶部

1. 滚动条不在body元素

场景：页面布局使用如下container容器布局，Aside固定高度，Main部分带纵向滚动条。

• 页面部分

<template>
  <el-container>
    <el-aside width="224px">
      <div class="title fs-16 c-999">标题xxx</div>
      <LeftMenu :menuData="menuList"></LeftMenu>
    </el-aside>
    <el-main id="monitor-main-box">
      <el-backtop :right="50" :bottom="50" target="#monitor-main-box" />
      <router-view v-slot="{ Component }">
        <transition name="fade-slide" mode="out-in" appear>
          <component :is="Component" id="main" />
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

• script部分

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

2. 滚动条直接在body元素

• 方法一

如果滚动条是直接在body上时，可以使用vue router自带的 scrollBehavior 方法。
详见地址

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 滚动到顶部
    return { top: 0 }
  }
})

注：在 vue router 4.x 中使用 top、left 来设置纵向和水平方向滚动的距离，vue router 3.x 中则使用 x、y 属性

• 方法二

// main.js中添加
router.beforeEach((to, from, next) => {
  // chrome
  document.body.scrollTop = 0;
  // firefox
  document.documentElement.scrollTop = 0;
  // safari
  window.pageYOffset = 0;
  next();
})
// 或
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0);
});