nuxt 路由跳转返回顶部详解

在 Nuxt 中，可以使用 `scrollToTop` 选项来在路由切换时返回页面顶部。这个选项可以在 `nuxt.config.js` 中进行全局配置，也可以在单个页面组件中进行配置。

#### 全局配置

在 `nuxt.config.js` 中添加以下配置：

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

这样在每次路由切换时，页面都会滚动到顶部。

#### 单个页面组件配置

如果只想在某个页面组件中启用返回顶部功能，可以在组件中添加以下代码：

export default {
  scrollToTop: true,
  // ...
}

这样在这个页面组件中，每次路由切换时，页面都会滚动到顶部。

#### 自定义返回顶部行为

如果需要自定义返回顶部的行为，可以在路由配置中的 `scrollBehavior` 方法中进行修改：

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      // 如果有 savedPosition，则滚动到保存的位置
      if (savedPosition) {
        return savedPosition
      } else {
        // 否则滚动到页面顶部
        return { x: 0, y: 0 }
      }
    }
  }
}

在 `scrollBehavior` 方法中，可以根据参数 `to` 和 `from` 来判断路由切换的方向，从而决定滚动方向和距离。