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
      }
}
相关推荐
烈风逍遥18 分钟前
第三篇:组件化实践,SpTable 通用表格组件设计
前端·架构
计算机魔术师21 分钟前
三周时间,128个PR,83万行代码——GitHub 是怎么让 AI 重写自己的
前端
甲维斯1 小时前
完蛋了,豆包变这么强?Seed2.1pro小测一下!
前端·人工智能
烈风逍遥1 小时前
第一篇:SeaPack 全栈项目工程化实践
前端·后端·架构
烈风逍遥1 小时前
第二篇:SeaPack 权限体系:从"谁都能看"到"该看什么看什么"
前端·后端·架构
Z_Quintaz1 小时前
关于导航栏颜色透明这件事
前端·debug
默_笙2 小时前
🚅 地铁的"回头路、存档点与人工闸机"(下):LangGraph 的循环、持久化与中断
前端·javascript
ClouGence2 小时前
Chrome Recorder 能用于长期回归测试吗?
前端·chrome·测试
拖孩2 小时前
这个小程序是 AI 帮我写的,可它里面一个 AI 功能都没有
前端·后端·微信小程序