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
      }
}
相关推荐
xiaobaoyu1 小时前
谈谈你对iframe的了解
前端
爱勇宝1 小时前
我做了一个排版器,也踩了一遍富文本复制的坑
前端·后端·微信
铁皮饭盒1 小时前
面试官:如何用 Bun + JS 实现安全的文件 MCP 工具集
前端·javascript·后端
探索前端2 小时前
Cesium图层加载及影像服务添加
前端·cesium
阿懂在掘金2 小时前
Vue 弹窗新范式——代码减少、复用翻倍与 AI 时代的前端基建
前端·设计模式·前端框架
千纸鹤安安2 小时前
Compose Runtime → KuiklyUI:Applier 搭起的渲染桥梁
前端
李明卫杭州2 小时前
mise 管理工具详解
前端·后端
颜进强2 小时前
从零搭建私人 RAG 实战:让 Claude Code 按需查询知识库
前端·后端·ai编程
程序员黑豆2 小时前
鸿蒙应用开发:Scroll 组件从入门到实战
前端·华为·harmonyos
张人玉2 小时前
基于 Vue 3 + ECharts + Express + SQLite 构建的新能源汽车销量数据分析与可视化平台——新能源汽车销量数据分析系统
数据库·vue.js·sqlite·echarts