vue-router4 (七) 滚动行为(scrollBehavior )

应用场景:

从A组件进入B组件,再返回A组件后,想让A组件的页面回到进入B组件前的位置,或者自动刷新回到A组件顶部,就需配置路由的滚动行为(scrollBehavior )。

①返回A组件时,让A组件回到进入B组件前的位置,路由配置:

复制代码
const router = createRouter({
    history:createWebHistory(),  //路由模式
    routes,   //路由配置项
    //滚动行为
    scrollBehavior (to, from, savedPosition) {
        //console.log(savedPosition);
        if (savedPosition) {
            return savedPosition
        } else {
            return{
                top:0,
                left:0
            }
        }
    }
 })

②返回A组件时,让A组件自动刷新回到顶部:

复制代码
 scrollBehavior (to, from, savedPosition) {
      return{
          top:0,
          left:0
      }
}
相关推荐
coder_Eight10 分钟前
LRU 缓存实现详解:双向链表 + 哈希表
前端·算法
1024小神16 分钟前
kotlin安卓项目配置app横屏等方式
前端
Cxiaomu19 分钟前
React + Node.js 实战:用豆包端到端实时语音大模型 API 落地web纯语音助手
前端·react.js·node.js
Electrolux19 分钟前
2026年了,你敢信一些知名的开源库都还不会正确使用防抖节流吗
前端
Beginner x_u22 分钟前
前端八股整理|JavaScript|高频小题 01
开发语言·前端·javascript
Flutter笔记23 分钟前
如何在本地跑 Core ML 模型识别呼噜声,并用 iCloud 优雅同步?
前端·人工智能·程序员
Greg_Zhong24 分钟前
前端测试的学习阶段,由基础到进阶的过程认识.....
前端·前端、专业测试结合
Mr Xu_30 分钟前
Vue3 + Leaflet实战:深入解析MarkerCluster点位聚合插件的使用与优化
前端·javascript·vue.js
源码宝30 分钟前
使用 PHP(Laravel 8)+ Vue 2 + Element UI + MySQL 5.7开发一套医院不良事件系统的注意事项
vue.js·php·laravel
D_C_tyu37 分钟前
Vue + Leaflet 实现地图任意点位点击查看时间功能
前端·javascript·vue.js