0
点赞
收藏
分享

微信扫一扫

ajax有哪些优缺点?

Villagers 2023-10-31 阅读 43

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

本文目录

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

使用原生滚动条

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<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 ,所以页面切换时滚动条不会置顶,所以需要重置滚动条

<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的位置

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)
举报

相关推荐

0 条评论