Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能：Vue3在点击菜单切换路由时，将页面el-main的内容滚动到顶部，布局如下，使用UI组件库为ElementPlus

Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部,vue,JavaScript,vue.js,javascript,前端

在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动，但是我使用无效，于是使用操作dom的方法，如下

可以使用watch函数来监听 当前路由的变化，当路由变化后滚动到顶部。

<template>
    <el-main ref="mainRef">
        <router-view />
    </el-main>
</template>

<script setup>
import { watch, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()
const mainRef = ref(null)
const unwatch = watch(
    () => router.currentRoute.value,
    (to, from) => {
        mainRef.value.$el.scrollTo({ top: 0, behavior: 'smooth' })
    }
)

onBeforeUnmount(() => {
    unwatch()
})
</script>

在上述代码中，我们首先导入watch和onBeforeUnmount函数以及useRouter函数来获取路由实例。然后，在mounted生命周期钩子中，我们使用watch函数来监听router.currentRoute.value，这是一个响应式的路由对象。当路由发生变化时，回调函数将被调用，其中的to参数表示要切换到的路由对象，from参数表示当前的路由对象。

在回调函数中处理路由变化的逻辑使其滚动到顶部。最后，在组件销毁前，我们使用onBeforeUnmount钩子函数来停止监听。文章来源地址https://www.toymoban.com/news/detail-802209.html

到了这里，关于Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！