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

在 Vue 中同一个页面使用 `keep-alive` 缓存多个动态组件时，由于组件实例被缓存了，所以滚动位置也会被保留。这个问题可以通过在组件中添加一个唯一标识符来解决。

具体来说，可以在每个需要缓存的组件中添加一个唯一的 `key` 属性，这个属性可以使用组件数据中的某个唯一值来实现。这样，在切换组件时，由于 `key` 属性不同，就会重新创建组件实例，从而避免滚动位置被保留的问题。

示例代码如下：

<template>
  <div>
    <component :is="currentComponent" :key="componentKey"></component>
  </div>
</template>

<script>
export default {
  name: 'MyPage',
  data() {
    return {
      currentComponent: 'ComponentA',
      componentKey: 0
    }
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
      this.componentKey++ // 修改 key 属性，重新创建组件实例
    }
  }
}
</script>

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