vue切换路由回到顶部或者指定位置

最新推荐文章于 2025-08-29 11:21:26 发布

原创最新推荐文章于 2025-08-29 11:21:26 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue路由器中的scrollBehavior方法，该方法用于控制页面滚动位置。当路由元信息配置了特定位置时，跳转将定位到配置的位置；若未配置，则会跳转到页面顶部。通过示例代码展示了如何实现这一功能。

vue路由中有一个方法scrollBehavior可以实现。如果在路由元信息配置了位置则跳转到配置的位置，若没配置即跳转到页面顶部。

const router = new Router({
  mode: 'history',
  routes: constantRouter,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: to.meta!.savedPosition || 0 }
    }
  },
}) as any