Vue Router锚点scrollBehavior问题：页面内锚点跳转失效求助

问题根源 #

你目前的路由配置把带锚点的路径单独创建了路由条目，而且scrollBehavior函数写死返回页面顶部，导致页面内跳转时，虽然URL更新了，但没有触发滚动到锚点位置的逻辑。

解决方案 #

1. 删除冗余路由配置

把路由中这条带锚点的路由删掉，锚点属于同一个页面的位置，不需要单独配置路由：

// 删掉这条路由
{
  path: "/home#fifthPage",
  name: "Services",
  component: Home,
  meta: {
    title: "Services",
    requiresAuth: false,
  },
},

2. 修改导航链接的锚点写法

将Services的router-link改为指向Home路由并携带hash参数：

<router-link v-show="!mobile" class="link link2" :to="{ name: 'Home', hash: '#fifthPage' }">Services</router-link>

3. 修复scrollBehavior函数

更新scrollBehavior，让它能识别锚点并滚动到对应位置：

const router = new VueRouter({
  mode: "history",
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 浏览器后退时回到之前的滚动位置
    if (savedPosition) {
      return savedPosition;
    }
    // 存在锚点时，滚动到对应元素
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth' // 可选，开启平滑滚动
      };
    }
    // 默认返回页面顶部
    return { x: 0, y: 0 };
  },
});

4. 处理同路由内跳转的滚动

如果是在Home页面内点击锚点链接，Vue Router可能不会重新触发scrollBehavior，可以在Home组件中添加路由监听，手动处理滚动：

export default {
  // ...其他组件代码
  watch: {
    '$route'(to) {
      if (to.hash) {
        // 延迟执行确保DOM已更新
        setTimeout(() => {
          const targetEl = document.querySelector(to.hash);
          if (targetEl) {
            targetEl.scrollIntoView({ behavior: 'smooth' });
          }
        }, 0);
      }
    }
  }
}

效果验证 #

修改完成后，无论是从Work页面跳转到Home页面的#fifthPage锚点，还是在Home页面内点击Services链接，都能正常滚动到目标区域，同时URL也会正确更新。

内容的提问来源于stack exchange，提问作者Václav Blaha