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
      }
}
相关推荐
GISer_Jing4 分钟前
Come on,工作总结
前端·ai·前端框架
Hilaku6 分钟前
Sass 和 Less 在 2026 年彻底多余了吗?
前端·javascript·程序员
百慕大三角11 分钟前
AI 写代码最大的风险不是不会写,而是太能写:我给 Coding Agent 加的 4 层工程约束
前端·ai编程·trae
用户9210802628614 分钟前
从 EventSource 到可复用 SSE Client:我如何实现多实例、双超时与自动重连
前端
咩咩啃树皮15 分钟前
ES6 Set 核心特点 + 最简数组去重
前端·javascript·html
Z小明18 分钟前
第 9 章 Pinia 状态管理
vue.js
雪芽蓝域zzs24 分钟前
第 13 章:对接后端真实接口(Axios 请求,替换 Mock 数据,完整业务闭环)
vue.js·echars
aa小小41 分钟前
uniApp离线数据不丢失方案
前端
代码小学僧1 小时前
从 0 到 1,记录我的第一个出海 SaaS 独立开发项目
前端·rpc·音视频开发
Aaswk1 小时前
从 HTML/CSS/JS 到 Vue + Axios 的一篇实战笔记
前端·css·vue.js·html