时间戳

首页 > 解决方案 > 返回页面时保持滚动位置

nuxt.js - 返回页面时保持滚动位置

问题描述

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

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

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

标签： nuxt.js

解决方案

您可以通过在 nuxt.config.js 中进行调整来更改路由更改时的滚动行为，如 https://nuxtjs.org/api/configuration-router#scrollBehavior中所述。就我而言，我只将此应用于“/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
  })
}

推荐阅读