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
      }
}
相关推荐
熊猫钓鱼几秒前
基于Trae CN与TrendsHub快速实现的热点百事通
前端·trae
LIUENG7 分钟前
Vue3 响应式原理
前端·vue.js
讨厌吃蛋黄酥11 分钟前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css
龙在天14 分钟前
🤩 用Babel自动埋点,原来这么简单!
前端
Hierifer14 分钟前
跨端实现之网络库拦截
前端
随笔记16 分钟前
react-router里的两种路由方式有什么不同
前端·react.js
前端李二牛16 分钟前
异步任务并发控制
前端·javascript
imLix39 分钟前
RunLoop 实现原理
前端·ios
wayman_he_何大民44 分钟前
初始机器学习算法 - 关联分析
前端·人工智能
飞飞飞仔1 小时前
别再瞎写提示词了!这份Claude Code优化指南让你效率提升10倍
前端·claude