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
      }
}
相关推荐
qq_3168377529 分钟前
阿里云百炼 fun-asr-realtime uniapp vue3 调用
javascript·vue.js·uni-app
庄园特聘拆椅狂魔44 分钟前
Java 后端转全栈的第一课:从前端项目搭建到技术选
java·开发语言·前端
triumph_passion1 小时前
前端路由策略:Memory、Hash 与 History
前端
李剑一1 小时前
AntDesign老版本没有月份和年份区间选择组件?我封装了一个完美版,附源码!
前端·vue.js
牧艺1 小时前
浏览器端 3D 看车重磅升级:从三款展车到可试驾的八车展厅
前端·three.js·交互设计
老男孩游戏时光1 小时前
Electron 桌面应用开发入门,前端也能写客户端
前端
默_笙1 小时前
🚊 别再让 AI 的记忆写两遍了:PostgreSQL 把关系查询和语义检索装进一张表
前端·javascript
进击的明明1 小时前
TypeScript速通笔记(下)
前端·面试·typescript
lzhdim1 小时前
C#不为人知的10个魔法特性:资深开发者也会震惊的底层奥秘
java·前端·javascript·算法·c#
计算机毕设定制辅导-无忧学长2 小时前
《基于Spring Boot的减脂轻食购物网站》
java·vue.js·spring boot·后端·减脂轻食购物网站