vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法

这个问题通常是由于Vue组件的状态没有正确地保存或恢复导致的。vue-splide 是一个基于 Vue 的轮播图插件，如果在页面切换后轮播图的顺序出现问题，很可能是因为轮播图的状态没有被正确地保存和恢复。

解决方法：

1. 使用 v-if 而不是 v-show 来控制轮播图的渲染，因为 v-if 会确保在条件为真时，组件的状态能被正确地初始化。
2. 使用 keep-alive 标签包裹 vue-splide 组件，这样可以在页面切换时保持组件状态，避免重新渲染导致状态丢失。
3. 如果使用了 keep-alive，确保在组件的 activated 生命周期钩子中重新初始化轮播图，例如重新调用 Splide.mount()。
4. 检查是否有其他的数据绑定或状态更新导致轮播图的状态发生变化，确保这些操作是在正确的生命周期钩子中进行的。
5. 如果问题依然存在，可以考虑使用 vue-splide 的事件和钩子来手动控制轮播图的状态，并在适当的时候进行恢复。

示例代码：

<template>
  <div>
    <keep-alive>
      <splide-component v-if="isSplideVisible" :key="componentKey"></splide-component>
    </keep-alive>
  </div>
</template>
 
<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
 
export default {
  components: {
    Splide,
    SplideSlide,
  },
  data() {
    return {
      isSplideVisible: true,
      componentKey: 0,
    };
  },
  methods: {
    // 当页面可见时，重新初始化轮播图
    reloadSplide() {
      this.isSplideVisible = false;
      this.$nextTick(() => {
        this.isSplideVisible = true;
        this.componentKey += 1; // 通过更改key来强制重新渲染组件
      });
    },
  },
  activated() {
    this.reloadSplide();
  },
};
</script>

在这个示例中，我们使用了 keep-alive 来保存轮播图的状态，并在 activated 生命周期钩子中重新初始化轮播图。同时，我们通过修改 componentKey 的值来强制重新渲染 vue-splide 组件，这有助于解决状态丢失的问题。