vite+vue3路由切换滚动条位置重置el-scrollbar

vite+vue3路由切换滚动条位置重置

本文目录

    • vite+vue3路由切换滚动条位置重置
      • 使用原生滚动条
      • 使用el-scrollbar
      • useRoute和useRouter

当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样,vue-router 可以自定义路由切换时页面如何滚动
vite+vue3路由切换滚动条位置重置el-scrollbar_第1张图片

使用原生滚动条

VueRouter官方文档:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

Router 实例提供一个 scrollBehavior 方法,接收 tofrom 路由对象

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array = [
  {
    path: '/',
    name: '...',
    component: () => import('@/views/xxx.vue')
  },
]

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

export default router
vite+vue3路由切换滚动条位置重置el-scrollbar_第2张图片

使用el-scrollbar

el-scrollbar使用手册:https://element-plus.org/zh-CN/component/scrollbar.html

路由切换时因为 el-scrollbar 组件包裹着router-view ,所以页面切换时滚动条不会置顶,所以需要重置滚动条


  

  • el-scrollbar方法
函数 解释
handleScroll 触发滚动事件
scrollTo 滚动到一组特定坐标
setScrollTop 设置滚动条到顶部的距离
setScrollLeft 设置滚动条到左边的距离
update 手动更新滚动条状态
wrapRef 滚动条包裹的 ref 对象



                    
                    

你可能感兴趣的:(前端,#,vue,vue.js,前端,javascript)