vite+vue3路由切换滚动条位置重置
当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样,vue-router
可以自定义路由切换时页面如何滚动
使用原生滚动条
VueRouter官方文档:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
为 Router
实例提供一个 scrollBehavior
方法,接收 to
和 from
路由对象
import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: '...',
component: () => import('@/views/xxx.vue')
},
]
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// 始终滚动到顶部
return { top: 0 }
}
})
export default router
使用el-scrollbar
el-scrollbar使用手册:https://element-plus.org/zh-CN/component/scrollbar.html
路由切换时因为 el-scrollbar
组件包裹着router-view
,所以页面切换时滚动条不会置顶,所以需要重置滚动条文章来源:https://www.toymoban.com/news/detail-733727.html
<el-scrollbar>
<RouterView></RouterView>
</el-scrollbar>
- el-scrollbar方法
函数 | 解释 |
---|---|
handleScroll | 触发滚动事件 |
scrollTo | 滚动到一组特定坐标 |
setScrollTop | 设置滚动条到顶部的距离 |
setScrollLeft | 设置滚动条到左边的距离 |
update | 手动更新滚动条状态 |
wrapRef | 滚动条包裹的 ref 对象 |
<template>
<el-scrollbar ref="scrollContainer">
<router-view />
</el-scrollbar>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const scrollContainer = ref(null);
const router = useRouter();
const handleRouteChange = () => {
if (scrollContainer.value && scrollContainer.value.scrollTo) {
scrollContainer.value.scrollTo(0, 0); // 滚动到顶部
}
};
// 解决:切换页面,滚动条位置不动
onMounted(() => {
router.afterEach(handleRouteChange);
});
onBeforeUnmount(() => {});
也可以使用EventBus
,每次切换路由时触发handleRouteChange
函数来调整el-scrollbar
的位置文章来源地址https://www.toymoban.com/news/detail-733727.html
useRoute和useRouter
-
useRoute
相当于this.$route
,返回当前的路由地址 -
useRouter
相当于this.$router
,返回路由器实例
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route)
import { useRouter } from "vue-router";
const router = useRouter();
console.log(router)
到了这里,关于vite+vue3路由切换滚动条位置重置el-scrollbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!