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
      }
}
相关推荐
IT_陈寒6 分钟前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
怕浪猫12 分钟前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览16 分钟前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦031819 分钟前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm20 分钟前
立体echarts柱状图咋做
前端·vue.js·echarts
wuhen_n28 分钟前
阿里云百炼平台 API 接入教程(附 Node.js + TypeScript 实战)
前端·人工智能·阿里云·ai编程
码语智行29 分钟前
操作日志注解模块
java·前端·python
CDN36029 分钟前
【前端实战】LCP指标从2.5s优化至0.8s!用360CDN的WebP自适应与缓存策略榨干性能
前端·缓存
星辰_mya31 分钟前
ThreadLocal之微服务链路追踪
java·开发语言·前端