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
      }
}
相关推荐
恋猫de小郭2 分钟前
Jetpack Compose 8 月版正式发布,核心模块 1.12
android·前端·flutter
纵道软件4 分钟前
使用 Docker 构建自定义 SeaTunnel Web 服务镜像
前端·docker·容器
山荷枝9 分钟前
05-Vue
前端·javascript·vue.js
可爱的秋秋啊31 分钟前
vue调用腾讯人脸组件封装+接口请求后端调用
前端·javascript·vue.js
程序员爱钓鱼35 分钟前
Rust 生命周期常见错误详解:看懂编译器报错并正确修复
前端·后端·rust
zhanghaha131436 分钟前
Python进阶教程:5_XML 解析 —— 新手完全指南
java·前端·数据库
绝世唐门三哥44 分钟前
CSS 虚线下划线用法指南:text-decoration 完整解析
前端·javascript·css
程序员爱钓鱼1 小时前
Go if 判断详解
前端·后端·go
程序员黑豆1 小时前
Java字符串拼接全解析:6种方式性能对比与实战指南
java·前端·ai编程
万少6 小时前
DeepSeek 昨晚刚开源了 Harness:附万少的2 万字保姆级教程
前端·后端·架构