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);
});