VueRouter scrollBehavior锚点跳转失效问题求助

1. 先修正scrollBehavior的配置 #

你当前的scrollBehavior强制每次路由跳转都回到顶部，直接覆盖了锚点的滚动逻辑。改成下面这样，只在跨页面跳转时回到顶部，同页面锚点跳转让给fullpage.js处理：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 判断是同页面且目标带锚点hash
    if (to.path === from.path && to.hash) {
      return false; // 不返回坐标，交给fullpage处理
    }
    // 其他情况保持回到顶部
    return { x: 0, y: 0 };
  }
});

2. 配置fullpage.js的锚点映射 #

fullpage.js本身支持锚点切换区块，你需要做两步：

• 给每个fullpage的section标签加上data-anchor属性，比如Services区块写<section data-anchor="services">...</section>
• 菜单里的路由链接hash要和这个属性对应，比如<router-link to="#services">Services</router-link>

然后初始化fullpage时开启锚点支持：

new fullpage('#fullpage', {
  anchors: ['home', 'bio', 'services'], // 和section的data-anchor一一对应
  scrollBar: false, // 关闭原生滚动条，避免和fullpage滚动冲突
  onLeave: function(origin, destination) {
    // 可选：切换区块时同步更新URL的hash，保持地址栏和当前区块一致
    window.location.hash = destination.anchor;
  }
});

3. 让VueRouter的hash变化触发fullpage跳转 #

VueRouter会拦截hash变化，所以要在路由钩子手动通知fullpage：

router.afterEach((to) => {
  if (to.hash) {
    // 提取锚点名称（去掉#）
    const targetAnchor = to.hash.slice(1);
    // 调用fullpage的API跳转到对应区块
    fullpage_api.moveTo(targetAnchor);
  }
});

额外注意点 #

• fullpage的初始化要放在Vue实例挂载之后，比如在组件的mounted钩子里面执行
• 如果是动态生成的section，要调用fullpage_api.reBuild()重新识别区块
• 测试时关掉浏览器的平滑滚动设置，避免和fullpage的滚动逻辑冲突

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