首页 > 其他分享 >vue3路由跳转页面不回顶部问题

vue3路由跳转页面不回顶部问题

时间:2025-01-16 10:03:00浏览次数:1  
标签:savedPosition top 跳转 createRouter vue3 router 路由 history

因为vue-router的跳转默认是保持原先的滚动位置,并不会自动回滚到顶部,所以需要在createRouter的时候配置一下。不废话~

const router = createRouter({
  // history: createWebHistory(),
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
      return { top: 0 }
  }
})

其实到这问题已经简单的被解决了,但是呢,如果想完美一些,就要用到传的参数to、from、savedPosition,to和from不用说,一个是到哪里去,一个是从哪里来,至于这个savedPosition嘛,其实字面意思就是保存的坐标,所以理解下来就是在某个页面离开时所滚动的坐标位置,所以代码再完善一下~

const router = createRouter({
  // history: createWebHistory(),
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (from.fullPath === '/xxx') {
      return { top: 0 }
    }  else {
      return savedPosition || { top: 0 }
    }
  }
})

我项目中因为是一跳多,所以是根据from判断的,里面的判断可以根据读者自己项目的具体场景来做判断。
其实,其实,vue-router官方文档是有写的,详情可以查看VueRouter
有不对的欢迎大家指正。

标签:savedPosition,top,跳转,createRouter,vue3,router,路由,history
From: https://www.cnblogs.com/itcattle/p/18674341

相关文章

  • 如何处理域名解析和跳转设置
    用户在设置域名泛解析后,发现无法实现预期的跳转效果,即用户访问任意子域名(如 *.domain.com)时,无法正确跳转到主站(如 www.domain.com)。解决方案:步骤操作说明确认DNS解析设置首先,确保域名的泛解析设置正确。通常情况下,泛解析是通过将 * 记录指向主域名的IP地址或CNAME......
  • 使用拓扑键实现拓扑感知的流量路由和CPU拓扑感知调度 Cilium 1.11 发布,带来内核级服务
    https://kubernetes.io/zh-cn/docs/concepts/services-networking/topology-aware-routing/https://help.aliyun.com/zh/ack/ack-managed-and-ack-dedicated/user-guide/topology-aware-cpu-schedulinghttps://kubernetes.p2hp.com/docs/concepts/services-networking/servi......
  • vue3+ts展示条项字段
     展示条项组件:<el-formv-if="currentStep===4"label-position="left"label-width="120px"style="display:flex;flex-wrap:wrap;justify-content:flex-start;margin-left:138px;"><el-rowv-for="(row,r......
  • 项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(六)
    文章目录一、考试管理模块实现1、添加考试功能实现1.1页面设计1.2前端功能实现1.3后端功能实现1.4效果展示2、考试管理功能实现2.1页面设计2.2前端功能实现2.3后端功能实现2.3.1后端查询接口实现2.3.2后端编辑接口实现2.3.3后端删除接......
  • 实现网页倒计时跳转的JavaScript代码
    在网页开发中,倒计时跳转功能常用于广告页面、活动倒计时或页面跳转提示等场景。下面是一个简单的JavaScript实现,用于在指定时间后自动跳转到另一个页面。该代码会在页面上显示倒计时,并在倒计时结束后跳转到指定的URL。代码实现<spanclass="time"></span><script>var......
  • 64.在Vue3中使用OpenLayers显示带箭头的线段,箭头居中
    在WebGIS开发中,使用OpenLayers渲染地图和矢量图形是常见的需求。今天我们来实现一个效果:在Vue3项目中,使用OpenLayers显示带箭头的线段,并让箭头居中。项目环境和技术栈Vue3+CompositionAPIOpenLayersVite构建工具实现效果我们将绘制一条由多个坐标点构成的线......
  • 【VUE】页面跳转实现动态样式控制
    【VUE】父子组件联动实现动态样式控制跳转得到的参数大概有这些:handleToPage:function(action,id,key="form",queryParam={}){this.$router.push({path:`${this.routeKey}/${key}/${action}${id?"/"+id:""}`,query:quer......
  • qiankun微前端——接入子应用Vue3+vite实现
    qiankun:乾坤微前端框架什么是微前端Techniques,strategiesandrecipesforbuildingamodernwebappwithmultipleteamsthatcanshipfeaturesindependently.–MicroFrontends微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术......
  • 打开浏览器Chrome跳转指定页面并全屏打开
    办法来源于https://blog.csdn.net/shaofengzong/article/details/119928096主要用于大屏数据可视化的项目,设置电脑自启动后,打开浏览器的同时默认跳转指定页面并全屏打开。、办法通过增加谷歌浏览器的启动参数进行实现。两种方式实现,需要根据需求进行选择默认全屏打开指定页面......
  • 路由器使用ch341a刷机教程\救砖教程
    材料:电脑一台(我的是win11x64的,所以其他的64位win,应该也是通用的)土豪金CH341a编程器一个免拆夹子一个(动手能力强的可以不要)CH341A编程器软件V1.4(包含驱动)注意:个人测试过其他的软件,都不行,不知道是我系统原因还是什么原因,编程器店家发过来那个版本把我坑得吐血,写进去的根本就不......