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
      }
}
相关推荐
狂炫冰美式1 分钟前
《预言市场进化论:从罗马斗兽场,到 Polymarket 的 K 线图》
前端·后端
码力巨能编3 分钟前
Markdown 作为 Vue 组件导入
前端·javascript·vue.js
私人珍藏库3 分钟前
[吾爱大神原创工具] FlowMouse - 心流鼠标手势 v1.0【Chrome浏览器插件】
前端·chrome·计算机外设
旧梦吟19 分钟前
脚本网页 地球演化
前端·算法·css3·html5·pygame
xiaoxue..22 分钟前
哨兵节点与快慢指针解决链表算法难题
前端·javascript·数据结构·算法·链表
这是个栗子22 分钟前
【前端知识点总结】前端跨域问题
前端·跨域·cors
尽欢i28 分钟前
踩过坑才懂:前端生成唯一 ID,别用 Date.now ()了!一行代码搞定
前端·javascript
JS_GGbond28 分钟前
解锁 JavaScript 对象的“魔法宝箱”:这些方法让你玩转对象操作
前端·javascript
是杉杉吖~32 分钟前
《5 分钟上手 React Flex 容器:从 0 搭建响应式卡片列表》
前端·react.js·前端框架
仰望.34 分钟前
vue 甘特图 vxe-gantt table 拖拽任务调整开始日期和结束日期的使用,拖拽任务调整日期
vue.js·甘特图·vxe-ui