Vue页面跳转后位置不在顶部的解决办法

3,160 阅读1分钟

在做的Vue项目中,从一个长页面跳到另一个路由后,页面的位置还停留在上个页面的位置,没有回到顶部,只需要在路由配置里添加scrollBehavior方法。

router/index.js 文件中:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index 
   }
  ],
  scrollBehavior (to, from, savedPosition) {       //添加该方法
    return { x: 0, y: 0}
  }
})

scrollBehavior 方法接收 tofrom 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息,长这样:

  • { x: number, y: number }

  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

Vue Router 滚动行为 官方文档:

地址: router.vuejs.org/zh/guide/ad…