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
      }
}
相关推荐
用户852495071841 分钟前
一个 useRef,三种人生:从 DOM 引用到 Web Worker
前端
无人生还6 分钟前
从 Vue3 到 React · 快速上手系列第 13 篇:工程化与综合实战(Vite + Todo 应用)
前端·vue.js·react.js
晴殇i8 分钟前
用 TRAE Work 搞定客户项目介绍,开发再也不用头疼写汇报 PPT
前端·后端
Cache技术分享9 分钟前
488. Java 反射 - 动态创建数组
前端·后端
Synmbrf10 分钟前
ECharts 饼图鼠标悬浮后标签 title 消失的问题
前端·javascript
Canace10 分钟前
用 AI 写了一天代码,为什么反而更累了?
前端·人工智能·ai编程
Vhen12 分钟前
Taro 封装小程序toast提示组件
前端
用户2506949216115 分钟前
React项目打包为.next文件部署
前端
tryCbest17 分钟前
Html设置网站图标
前端·html
半个落月18 分钟前
从页面跳转到前端路由:手写一个简单的 HashRouter
前端