vue3缓存路由，及刷新数据实战

首先，要缓存的组件需要一个名字。不过如果你用的是setup script，则没有地方给你配置组件名字，此时你可以再开一个script标签，仅仅是用来配置组件名字。

演示

<script>
export default {
    name: 'home',
}
</script>

然后就可以使用keep-alive组件了，不过大家更多的是切换路由的时候使用缓存组件的，所以这里我就演示切换路由的例子。

<router-view v-slot="{ Component }">
    <keep-alive :include="['home']">
        <component :is="Component"></component>
    </keep-alive>
</router-view>

如果你还想在切换组件的时候有一些动画效果，此时也可以使用transition组件，给keep-alive再包一层。

<router-view v-slot="{ Component }">
    <transition appear mode="out-in" name="slide">
        <keep-alive :include="['home']">
            <component :is="Component"></component>
        </keep-alive>
    </transition>
</router-view>

注意点一：刷新数据

由于路由被缓存了，所以无论你从什么路由切换过来，组件里面的代码都是不会执行的，而是保持状态。

但是你确实有一个需求，就是希望从指定的某个页面切换过来时刷新页面，而其他页面切换过来时不执行代码，比如从添加数据的页面过来的，也就是在添加数据后转到页面时刷新数据，而从其他页面过来的不刷新数据时，此时你可以用router来判断当前是从哪个页面过来的。

import { useRouter } from 'vue-router'

const router = useRouter()

//添加需要刷新页面的白名单
const whiteList = ['/add']
router.beforeEach((to, from, next) => {
    //如果是从这个页面返回的，则刷新当前数据
    if (whiteList.includes(from.path)) {
        refreshData()
    }
    next()
})

注意点二：使用定时器

值得注意的是，路由缓存，顾名思义，就是把指定的路由缓存起来。那么这个路由被缓存起来，就不会被销毁。而如果你需要对销毁组件后开启一系列的操作，此时就不能使用路由缓存。

比如你对一个图表展示页面开启一个定时器，让定时器15秒获取最新的数据，那么这个定时器就会一直执行。而你想在切换到其他组件的时候清除定时器，那么抱歉，是不会执行清除的，因此会一直在后台继续执行定时器。

如果你需要对一个页面使用定时器，那就不要使用路由缓存。

不过也是有解决方案的，就是使用router，在离开当前的路由的时候清除定时器。