Vuetify跨页面滚动失效问题：导航栏锚点跳转异常求助

我完全懂你遇到的这个坑——当点击导航跳转到其他页面的指定区域时，新页面的DOM还没加载完成，$vuetify.goTo找不到目标元素，直接导致滚动操作失效。这是典型的路由跳转与DOM渲染的时序问题，咱们从确保DOM就绪后再执行滚动这个核心点来解决。

方案一：等待路由跳转+DOM更新后再执行滚动 #

先改造你现有的方法，利用$router.push返回Promise的特性，等路由跳转完成，再通过$nextTick确保新页面DOM渲染完毕：

async pageClicked(page) {
  // 等待路由跳转完成
  await this.goToPage(page.path);
  // 等待新页面DOM完全渲染
  await this.$nextTick();
  // 执行滚动操作
  this.goToTarget(page, this.options);
}

goToPage(path) {
  // 返回路由跳转的Promise，方便await等待
  return this.$router.push(path);
}

goToTarget(target, options) {
  if (target.topOfPage) {
    this.$vuetify.goTo(0, options);
  } else if (target.id) {
    // 记得给id加上#前缀，确保能匹配到页面元素
    this.$vuetify.goTo(`#${target.id}`, options);
  }
}

方案二：通过路由参数传递目标，在目标页面自身处理滚动（更推荐） #

这种方式把滚动逻辑交给目标页面自己处理，彻底避免跨页面操作DOM的不确定性，逻辑也更清晰：

1. 修改导航点击方法，跳转时携带滚动目标参数：

pageClicked(page) {
  const routeParams = { path: page.path };
  // 根据目标类型携带不同的query参数
  if (!page.topOfPage && page.id) {
    routeParams.query = { scrollTarget: page.id };
  } else if (page.topOfPage) {
    routeParams.query = { scrollToTop: true };
  }
  this.$router.push(routeParams);
}

2. 在所有可能作为跳转目标的页面的mounted钩子中添加滚动逻辑：

mounted() {
  const { scrollTarget, scrollToTop } = this.$route.query;
  const scrollOptions = this.options; // 这里可以用你全局定义的滚动配置

  this.$nextTick(() => {
    if (scrollTarget) {
      this.$vuetify.goTo(`#${scrollTarget}`, scrollOptions);
    } else if (scrollToTop) {
      this.$vuetify.goTo(0, scrollOptions);
    }
  });
}

为什么更推荐第二种方案？ #

路由跳转后，新页面组件需要时间完成挂载和DOM渲染，直接在原页面调用滚动方法时，目标元素根本还不存在。而让目标页面自己在mounted钩子中处理，能100%确保DOM已经就绪，$vuetify.goTo可以精准定位到目标元素，滚动操作自然就能正常生效了。

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