Nuxt 3的scrollBehaviour不等待页面完成加载

Question

我的项目是用Nuxt3构建的。目前，我有一个从页面 A 到页面 B 上组件内的锚点的链接。预期的行为是用户单击此链接，然后滚动到组件页面 B。

但是，在页面 B 上，有几个组件在加载之前等待 api 请求解析，我认为这会影响页面滚动到的位置。

查看我找到的文档

hooks.hook('page:finish', async () => {}) 我认为应该等待页面（以及该页面上的所有子组件）完成加载。但是，如果我将控制台日志放入每个组件的 onMounted() 中，我可以看到存在一个计时问题，即我的 page:finish 挂钩不是最后得到的。但子组件中的其他日志会在之后调用。建议这个钩子实际上并不是在等待页面完成加载。

我知道我可以延长全局scrollBehaviour()中的超时，但我不想在我的项目中将其用于不需要长时间延迟的其他用途。

有谁知道在触发滚动事件之前检查父页面是否完全加载的方法？

Answer 1

page:finish 挂钩可能不适合您的用例，因为它可能不会等到所有数据请求完成。您可以尝试的另一种选择是使用具有全局状态的 watch() 来跟踪组件的加载状态。当所有组件加载完毕后，即可触发相应的滚动事件。