vue中使用keep-alive缓存动态组件 为什页面滚动位置也一样

在 Vue 中使用 `keep-alive` 缓存动态组件时，同样会出现滚动位置相同的问题。这是因为使用 `keep-alive` 缓存动态组件时，缓存的是组件实例对象，也就是说，即使组件被缓存起来了，组件实例仍然存在，所以滚动位置也会被保留。

解决这个问题的方法和在普通组件中使用 `keep-alive` 缓存时类似，可以在需要缓存的动态组件中添加 `activated` 钩子函数，在组件被激活并重新渲染时恢复滚动位置。

示例代码如下：

export default {
  name: 'MyDynamicComponent',
  data() {
    return {
      scrollPosition: null // 保存滚动位置
    }
  },
  activated() {
    // 组件被激活并重新渲染时恢复滚动位置
    if (this.scrollPosition !== null) {
      window.scrollTo(0, this.scrollPosition)
    }
  },
  beforeRouteLeave(to, from, next) {
    // 离开当前路由时保存滚动位置
    this.scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
    next()
  }
}

通过这种方式，可以在使用 `keep-alive` 缓存动态组件时保留组件状态的同时，避免滚动位置的问题。