Nuxt js 3 页面加载完成后的滚动行为

Question

router.options.js

文件：

export default {
  scrollBehavior(to, from, savedPosition) {
    return {
      top: 0,
      behavior: 'smooth',
    }
  },
}

我在导航到的页面中使用

useAsyncData

。因此，页面导航之间存在延迟，因为路由器等待数据获取。问题是页面立即滚动，而不等待新页面渲染开始。所以我在旧页面上，在新页面出现之前滚动条转到顶部。

Answer 1

使用以下代码修复它：

export default {
  scrollBehavior(to, from, savedPosition) {
    const nuxtApp = useNuxtApp()

    return new Promise((resolve) => {
      nuxtApp.hook('page:finish', () => {
        resolve({
          top: 0,
          behavior: 'smooth'
        })
      })
    })
  },
}

Answer 2

最好不要在

nuxtApp.hook

中打电话给

scrollBehavior

scrollBehavior

每次页面更改时都会调用。

每次导航完成时，

nuxtApp.hook('page:finish')

都会创建一个新的钩子（需要在

scrollBehavior

完成之前手动取消注册）。

最好使用

hookOnce

代替，如建议这里

// app/router.options.ts

export default <RouterOptions>{
  scrollBehavior(to, from, savedPosition) {
    const nuxtApp = useNuxtApp()
   
    return new Promise(async (resolve) => {
      nuxtApp.hooks.hookOnce('page:finish', async () => {
        await nextTick()
        resolve(position)
   }
}