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

这篇具有很好参考价值的文章主要介绍了vite+vue3路由切换滚动条位置重置el-scrollbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样,vue-router 可以自定义路由切换时页面如何滚动
vite+vue3路由切换滚动条位置重置el-scrollbar,前端,# vue,vue.js,前端,javascript

使用原生滚动条

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
vite+vue3路由切换滚动条位置重置el-scrollbar,前端,# vue,vue.js,前端,javascript

使用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的位置文章来源地址https://www.toymoban.com/news/detail-733727.html

vite+vue3路由切换滚动条位置重置el-scrollbar,前端,# vue,vue.js,前端,javascript

useRoute和useRouter

  • useRoute相当于this.$route,返回当前的路由地址
  • useRouter相当于this.$router,返回路由器实例
import { useRoute } from "vue-router";

const route = useRoute();

console.log(route)
vite+vue3路由切换滚动条位置重置el-scrollbar,前端,# vue,vue.js,前端,javascript
import { useRouter } from "vue-router";

const router = useRouter();

console.log(router)
vite+vue3路由切换滚动条位置重置el-scrollbar,前端,# vue,vue.js,前端,javascript

到了这里,关于vite+vue3路由切换滚动条位置重置el-scrollbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3动态路由(Vite+Vue3+TS+Mock)

    Vue通过路由进行页面管理,不同的路由绑定到不同的页面。一般来说,前端直接写好的路由为静态路由,在不修改代码的情况下,路由表是不会改变的。对于不需要动态改变路由表的网站,静态路由就已经足够了,但是当页面需要与权限进行绑定时,不同用户允许浏览的页面

    2024年02月02日
    浏览(123)
  • 【Vite】Vite切换版本(Vite+vue3)报错 [vite] Internal server error: Cannot set property ‘id‘ of undefined

    Vue3+vite的项目,在全局安装新的Vite版本后,一直报下图错误。 报错信息 通过很多方式没有解决,最后发现是Vite版本的问题,因为Vue是从脚手架中引入的 查看package.json和package.lock.json区别 修改 将 package.json 中vite的版本号固定后,安装( npm install )发现仍有问题 最终解决 查

    2024年02月16日
    浏览(50)
  • Vue3+vite路由配置优化(自动化导入)

    今天在维护优化公司中台项目时,发现路由的文件配置非常多非常乱,只要只中大型项目,都会进入很多的路由页面,规范一点的公司还会吧路由进行模块化导入,但是依然存在很多文件夹的和手动导入的问题。 于是我想到了我之前使用vuex时进行的模块化自动导入js文件,能

    2024年02月08日
    浏览(35)
  • vue3+vite路由中使用element自动导入图标

    el-icon v-if=\\\"childItem.meta childItem.meta.icon\\\"          component :is=\\\"childItem.meta.icon\\\" / /el-icon import { createRouter, createWebHashHistory } from \\\'vue-router\\\' import Layout from \\\'../layout/index.vue\\\' import { markRaw } from \\\'vue\\\' export const asyncRoutes = [   {     path: \\\'/\\\',     name: \\\'HomePage\\\',     component: Layout,     redir

    2024年02月15日
    浏览(44)
  • vue3切换路由模式——Hash 、histoary

    1、history模式 使用createWebHistory 2、hash模式 使用createWebHashHistory 综上所述: history 对应 createWebHistory hash 对应 createWebHashHistory

    2024年02月02日
    浏览(46)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router

    项目代码同步至码云 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。 在 src/view 下新建 home.vue 和 login.vue ,内容如下: login.vue 里修改下对应name即可 index.ts 作为路由入口, static.ts 作为静态路由, modules 内还可以

    2024年02月05日
    浏览(70)
  • vue3如何切换hash/history两种路由模式

    本文介绍了在vue3中,如何使用history和hash两种路由模式的方法 1、history模式 使用createWebHistory 2、hash模式 使用createWebHashHistory 综上所述: history 对应 createWebHistory hash 对应 createWebHashHistory

    2024年02月13日
    浏览(42)
  • vue3之vite创建h5项目之2 (sass公共样式、声明组件、路由配置和layout组件 )

    pnpm i -D sass 1-1-1 main.ts 引入公共样式方式 1-3-1 src / style / index.scss ( 适配iphonex等还有引入其他公共的样式 ) 1-3-2 src / style / mixin.scss ( 公共样式方法抽离 ) 1-3-3 src / style / reset.scss ( 重置样式 ) 1-3-4 src / style / variables.scss ( 定义的公共变量样式 ) 1-3-5 使用变量 3-1 路径文件

    2024年02月05日
    浏览(53)
  • 基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换

    访问https://nodejs.org/en,点击下载最新版本的nodejs,并安装。 在项目目录文件下,通过cmd运行下述指令。 依次输入下列命令,启动vue项目 在浏览器中加载http://localhost:5173/,页面加载成功,说明vue项目安装启动成功。 建议安装第三方库通过vscode中的终端来操作,项目启动通过

    2024年02月03日
    浏览(84)
  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包