返回页面时保持滚动位置

Question

我在页面 A 上有一个很长的列表，我正在滚动浏览。当我访问另一个页面然后返回到页面 A 时，我想在我离开的滚动位置。

我已经为 Vue 找到了这个包（https://github.com/jeneser/vue-scroll-behavior），但我无法让它与 NuxtJS 一起使用。

关于我如何最好地解决这个问题的任何建议或想法？

Answer 1

您可以按照https://nuxtjs.org/api/configuration-router#scrollBehavior 中的描述更改路由更改时的滚动行为，方法 是在 nuxt.config.js 中对其进行调整。就我而言，我仅将其应用于“/browse”路线。

function scrollBehavior (to, from, savedPosition) {
  ...
  if (to.path === '/browse') {
   position = false
  }
  ...
}

我们必须将 设置position为 false 以保留滚动位置。

为了记住滚动位置，我们可以使用像https://github.com/jeneser/vue-scroll-behavior这样的包，我们可以将其作为插件包含到 nuxt 中：

import Vue from 'vue'
import vueScrollBehavior from 'vue-scroll-behavior'

export default ({ app }) => {
  Vue.use(vueScrollBehavior, {
    router: app.router
  })
}