Nuxt3 scrollBehaviour未等待页面加载完成的解决方法咨询

不用全局修改scrollBehaviour的超时时间，你可以试试这几个针对性的方案：

1. 页面级自定义加载状态标记 #

在页面B中维护一个全局加载状态，等所有依赖API的组件都加载完成后，再触发锚点滚动：

• 首先在页面B中定义状态，比如allComponentsLoaded，初始为false
• 每个依赖API的组件，在数据请求完成且渲染完成后（比如onMounted钩子中确认数据已获取），通知页面更新状态
• 页面监听这个状态，一旦变为true，再根据路由中的锚点执行滚动

示例代码：

<!-- pages/B.vue -->
<script setup>
const route = useRoute()
const loadedComponentCount = ref(0)
const totalAsyncComponents = 2 // 页面中依赖API的组件总数

const markComponentLoaded = () => {
  loadedComponentCount.value++
  if (loadedComponentCount.value === totalAsyncComponents) {
    triggerScroll()
  }
}

const triggerScroll = () => {
  if (route.hash) {
    const targetEl = document.querySelector(route.hash)
    targetEl?.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

<!-- 子组件示例 -->
<script setup>
const emit = defineEmits(['component-loaded'])
const { data, pending } = useAsyncData('xxx', () => $fetch('/api/xxx'))

watch(pending, (isPending) => {
  if (!isPending && data.value) {
    emit('component-loaded')
  }
})
</script>

2. 监听所有异步请求的完成状态 #

如果页面B的API请求是在页面层面发起的（比如用useAsyncData），可以直接监听这些请求的pending状态，等所有请求都完成后再滚动：

<script setup>
const route = useRoute()
const { pending: pendingData1 } = useAsyncData('data1', () => $fetch('/api/data1'))
const { pending: pendingData2 } = useAsyncData('data2', () => $fetch('/api/data2'))

// 监听所有请求是否都完成
watch([pendingData1, pendingData2], ([p1, p2]) => {
  if (!p1 && !p2 && route.hash) {
    nextTick(() => {
      const targetEl = document.querySelector(route.hash)
      targetEl?.scrollIntoView({ behavior: 'smooth' })
    })
  }
}, { deep: true })
</script>

3. 锚点组件主动触发滚动 #

对于单个依赖API的锚点目标组件，可以在组件内部确认数据加载完成后，主动触发滚动：

<!-- 锚点目标子组件 -->
<script setup>
const route = useRoute()
const { data, pending } = useAsyncData('xxx', () => $fetch('/api/xxx'))
const el = ref(null)

onMounted(async () => {
  // 等待数据加载完成
  while (pending.value) {
    await nextTick()
  }
  // 匹配当前路由锚点时触发滚动
  if (route.hash === `#${el.value.id}`) {
    el.value.scrollIntoView({ behavior: 'smooth' })
  }
})
</script>

<template>
  <div ref="el" id="target-anchor">
    <!-- 依赖API的内容 -->
  </div>
</template>

这些方案都可以精准控制滚动触发的时机，避免全局配置带来的不必要延迟。

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