一、在使用NutUI（Vue3版本）组件库开发练习时，遇到了路由使用keep-alive时，页面切换回来，轮播图自动播放失效的问题，轮播图就卡着不动了的情况，上网搜索相关解决的方法，在借鉴了 vue keep-alive配合swiper的问题（转载）_swiper10 keep-alive-CSDN博客 的文章之后得到了问题的解决，具体如下代码：
<script lang="ts" setup>
import { ref, onActivated, onDeactivated } from 'vue'
const isKeep = ref(true) // 充当标识符的作用，用于排除轮播图不受keep-alive的影响
const list = ref([
'https://yourpic.png',
'https://yourpic.png',
'https://yourpic.png',
'https://yourpic.png'
]) // 轮播图图片列表（图片地址）
/**
* 利用钩子函数的创建时机来解决页面受到 <keep-alive> 影响后轮播图不自动播放的问题
* 其次使用v-if来实现当组件切换过程中轮播图组件的被销毁与重建，从而达到不受keep-alive的影响
*/
onActivated(() => {
isKeep.value = true // keep-alive组件 激活
})
onDeactivated(() => {
isKeep.value = false // keep-alive组件 非激活
})
</script>
<template>
<!-- nut-swiper组件具体的API可以到NutUI的官网查看 -->
<!-- 重点：在组件上添加 v-if="isKeep" -->
<nut-swiper
v-if="isKeep"
:init-page="0"
:auto-play="3000"
pagination-visible
pagination-color="#426543"
pagination-unselected-color="#808080"
>
<nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
<img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
</nut-swiper-item>
</nut-swiper>
</template>
<style scoped>
</style>
二、上述解决了轮播图自动播放失效的问题，但是每一次切换回到原来有轮播图的组件，轮播图都是从第一张图片从头开始轮播，可不可以实现切换回原来有轮播图的组件后，轮播图从切换组件前的图片，以此开始轮播呢。由此，对代码进行了相应了修改，实现最终效果：
<script lang="ts" setup>
import { ref, onActivated, onDeactivated } from 'vue'
const initIndex = ref(0) // 记录轮播图的索引值
const isKeep = ref(true) // 充当标识符的作用，用于排除轮播图不受keep-alive的影响
const list = ref([
'https://yourpic.png',
'https://yourpic.png',
'https://yourpic.png',
'https://yourpic.png'
]) // 轮播图图片列表（图片地址）
/**
* 利用钩子函数的创建时机来解决页面受到 <keep-alive> 影响后轮播图不自动播放的问题
* 其次使用v-if来实现当组件切换过程中轮播图组件的被销毁与重建，从而达到不受keep-alive的影响
*/
onActivated(() => {
isKeep.value = true // keep-alive组件 激活
})
onDeactivated(() => {
isKeep.value = false // keep-alive组件 非激活
})
// 将切换组件前的index索引值记录下来，下次切换回原来的组件时，依然是之前切换组件的index
const onChange = (index) => {
initIndex.value = index
}
</script>
<template>
<!-- nut-swiper组件具体的API可以到NutUI的官网查看 -->
<!-- 重点：在组件上添加 v-if="isKeep"，其次添加@change="onChange" -->
<nut-swiper
v-if="isKeep"
:init-page="initIndex"
:auto-play="3000"
pagination-visible
pagination-color="#426543"
pagination-unselected-color="#808080"
@change="onChange"
>
<nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
<img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
</nut-swiper-item>
</nut-swiper>
</template>
<style scoped>
</style>
感想：遇到问题不要怕，先思考；不行再去上网搜，网上相关文章结合思考再出发，再多的问题也不怕。
一起学习，共同进步哈
