Nuxt JS 中的路由更改时页面不会滚动到顶部

Question

当 Nuxt 的路线发生变化时，我总是尝试转到页面顶部。

所以我把它放入我的app/router.scrollBehavior.js文件中：

export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

但它总是返回到最后保存的位置（null顺便说一下，它总是在我的控制台中）。

知道我在这里会错过什么吗？

Answer 1

对于 Nuxt v3.0.0-rc.3

创建以文件夹命名route.global.ts的middleware/文件

然后将其写入文件中：

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== from.path && process.client) {
    window.scrollTo(0, 0)
  }
})

Answer 2

我使用 Nuxt 3 (npm:nuxt3@3.0.0-rc.4-27588443.cf25525)，没有一个解决方案适合我。最后这有效：

/plugins/scrollToTop.js（任何文件名都可以，只需将其放入插件文件夹中即可）

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.options.scrollBehavior = async (to, from, savedPosition) => {
    if (to.path !== from.path && process.client) {
      window.scrollTo(0, 0);
    }
  };
});