vite+vue+ts+element-plus从零开发管理后台框架(22)-路由组件缓存

测试

编辑src/views/Home.vue，添加script段。

<script setup>
import { onMounted } from 'vue'


onMounted(() => {
    console.log('首页挂载完成')
})
</script>

编辑src/router/index.ts，输出路由。

if (isAddRoute) {
    if (to.meta.desc) {
        const fastnavStore = useFastnavStore()
        fastnavStore.addData(to.meta.desc as string, to.path)
    }
    console.log(`to.path:${to.path}`)

    next()
    return
}

测试发现，/Home切换几次就加载了几次。

缓存

编辑src/views/Main.vue，template段el-main修改如下。

<el-main>
    <el-scrollbar>
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" />
            </keep-alive>
        </router-view>
    </el-scrollbar>
</el-main>

再次测试，/Home不管切换几次它都只加载了一次，说明缓存成功了。

关闭页签清除缓存

现在虽然缓存了，但要在关闭页签时清除缓存，免得不能加载新数据。

编辑src/store/fastnav.ts，给每个路由配置一个id。

import { defineStore } from 'pinia'


const idMap: Map<string, number> = new Map()

actions下添加idGet方法

idGet(path: string): string {
    const id = idMap.get(path) ?? 1
    return path + id
},

修改removeData方法，即在关闭时路由id加一，这样它下次打开时就会重新加载。

this.datas.splice(i, 1)

const id = idMap.get(path) ?? 1
idMap.set(path, id + 1)

编辑src/views/Main.vue，template段el-main修改如下。

<el-main>
    <el-scrollbar>
        <router-view v-slot="{ Component, route }">
            <keep-alive>
                <component :is="Component" :key="fastnavStore.idGet(route.path)" />
            </keep-alive>
        </router-view>
    </el-scrollbar>
</el-main>

测试

编辑src/views/Main.vue，script段修改onTagClose，添加一行调试信息。

const onTagClose = (path: string) => {
    console.log(`关闭页签:${path}`)
    const pathNew = fastnavStore.removeData(path)
    if (!pathNew) return
    router.push(pathNew)
}

从测试发现，/Home一开始加载然后缓存，关闭页签后重新打开又重新加载。