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
      }
}
相关推荐
武子康2 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
一点一木2 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github
IT_陈寒4 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen4 小时前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
遇乐的果园4 小时前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
用户985033593285 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端
颜酱5 小时前
01 | 骨架搭建:FastAPI + Vue 跑通第一个 SSE 流式问答
前端·人工智能·后端
hoLzwEge5 小时前
解码 IDE 智能提示:jsconfig.json 辅助开发全攻略
前端·前端框架
leoZ2315 小时前
记忆系统与 Agent 定制完全指南(四):自定义 Agent 开发(一)
前端·chrome
慧一居士5 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js