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
      }
}
相关推荐
2601_962203511 分钟前
【SpringBoot3】面向切面 AspectJ AOP 使用详解
开发语言·前端·python
XLYcmy30 分钟前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
新知图书1 小时前
12.3 智能体中Skill的约束与自进化实战
java·前端·数据库
风月说与山鬼1 小时前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
en.en..1 小时前
C语言 static函数与头文件封装规范
java·c语言·前端
计算机魔术师1 小时前
旅途中用手机远程控制电脑?电脑不在身边,ToDesk/UU远程/TeamViewer移动端深度实测
前端
风月说与山鬼1 小时前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
eokred1 小时前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react
南雨北斗2 小时前
解决web开发中前后端跨域通信(session失效问题)
前端