vue keepalive组件

Question

vue 通过keepalive实现滚动条记录功能，功能是实现了，但从keepalive组件切换到非keepalive组件，非keepalive组件会重新加载，非keepalive组件间切换就没有问题，请问是什么原因啊？该怎么解决呢？

Answer 1

引自免费微信小程序：皆我百晓生

你好，你的问题关于 Vue 中的 keep-alive 组件出现的滚动条记录问题很具有挑战性。我会尝试帮助你解决这个问题。首先，让我们理解一下 Vue 的 keep-alive 组件的工作原理。

Vue 的 keep-alive 组件可以将被包含的组件缓存起来，避免重复渲染，从而优化性能。当你从 keep-alive 组件切换到非 keep-alive 组件时，由于非 keep-alive 组件没有被缓存，所以它们会重新加载。这可能导致页面滚动位置发生变化，因为每次重新加载都会重置滚动位置。当在非 keep-alive 组件之间切换时，因为它们都是非缓存的，所以不会触发重新加载的问题。

为了解决这个问题，你可以尝试以下方法：

方法一：使用滚动行为控制

你可以使用 Vue Router 的滚动行为控制功能。在你的路由配置中，可以为特定的路由设置滚动行为，使其滚动到上次离开时的位置而不是重新加载页面时滚动到顶部。这需要配置路由的 scrollBehavior 属性来实现。以下是一个示例：

const router = new VueRouter({
  routes: [...], // 你的路由配置
  scrollBehavior (to, from, savedPosition) { // 当页面滚动时触发该函数
    return savedPosition ? savedPosition : { x: 0, y: 0 } // 返回上次离开的位置或页面顶部
  }
})

方法二：使用动态组件和 keep-alive 的 include 属性

如果你希望某些非 keep-alive 组件也能保持滚动位置，你可以考虑使用动态组件结合 keep-alive 的 include 属性来实现。这样你可以动态地将某些组件包含在 keep-alive 中，从而保持其滚动位置。但这需要更复杂的逻辑来控制哪些组件应该被缓存。

方法三：监听路由变化并保存滚动位置

你还可以监听路由变化事件，并在路由切换时保存和恢复滚动位置。你可以使用 Vue Router 的导航守卫或全局混入（mixin）来实现这个功能。当路由变化时，你可以保存当前页面的滚动位置，并在新页面加载后恢复它。这需要一些额外的逻辑来处理滚动位置的保存和恢复。

这些方法中的任何一个都可以帮助你解决从 keep-alive 组件切换到非 keep-alive 组件时滚动条重新加载的问题。你可以根据你的具体需求和项目结构选择最适合你的方法。希望这些解决方案能帮到你！如果有其他问题或需要进一步帮助的地方，请随时告诉我。