Vue.js同路由下点击链接无法滚动至顶部的解决方法问询

这个问题我之前开发Vue项目时也碰到过！Vue Router默认的scrollBehavior确实只会在不同路由切换时触发，同路由跳转因为状态没变化，就直接跳过了。下面给你几个实用的解决方案，你可以根据自己的场景选择：

1. 全局路由守卫处理（最通用，首推） #

这种方法能覆盖所有同路由跳转的场景，不管是通过router-link点击还是编程式导航，都能自动触发滚动到顶部。只需要在创建Router实例后，添加一个全局的路由守卫：

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'index', component: Main },
    { path: '/some-path', name: 'some-path', component: SomePath }
  ],
  scrollBehavior() {
    return { x: 0, y: 0 }
  }
})

router.beforeEach((to, from, next) => {
  // 判断是否是同路由跳转（路径和名称都一致）
  if (to.path === from.path && to.name === from.name) {
    // 滚动到顶部，可选behavior: 'smooth'实现平滑滚动
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
  next()
})

优点：全局生效，无需在每个链接或组件重复写代码，逻辑统一。

2. 给特定router-link绑定原生点击事件（适合个别链接） #

如果只有少数几个同路由链接需要处理（比如页脚的首页链接），可以直接给router-link绑定原生点击事件，手动触发滚动：

<router-link 
  to="/" 
  @click.native="handleScrollToTop"
>
 返回首页
</router-link>

然后在组件的methods中实现方法：

methods: {
  handleScrollToTop() {
    // 先判断当前是否已经在目标路由上
    if (this.$route.path === '/') {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}

优点：灵活，只针对特定链接生效；缺点：如果有多个同路由链接，需要重复写代码。

3. 组件内使用beforeRouteUpdate钩子（适合单个组件） #

如果某个组件内部有同路由跳转的逻辑（比如列表页切换筛选条件但路由不变），可以在组件内使用beforeRouteUpdate钩子处理：

export default {
  // ...其他组件选项
  beforeRouteUpdate(to, from, next) {
    // 确认是同路由跳转
    if (to.path === from.path) {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
    next()
  }
}

优点：只对当前组件生效，不会影响其他组件；缺点：只能覆盖当前组件内的同路由跳转场景。

4. 添加唯一查询参数（hack式方案，不推荐URL洁癖者） #

这个思路是让Vue Router认为路由有变化，从而触发scrollBehavior。具体是在跳转时添加一个随机的查询参数（比如时间戳）：

<router-link 
  :to="{ path: '/', query: { t: Date.now() } }"
>
 返回首页
</router-link>

这样每次点击都会生成一个新的t参数，Vue Router会判定为新的路由跳转，自然会触发你配置的scrollBehavior。不过这个方法会让URL带上额外参数，如果你在意URL的整洁性，就不建议用这个。

如果要覆盖所有同路由跳转场景，全局路由守卫的方法是最优选择，代码简洁且维护成本低；如果只是个别链接或组件需要处理，再针对性选择其他方案。

内容的提问来源于stack exchange，提问作者kuceram