本篇内容主要讲解“Vue3嵌套路由中怎么使用keep-alive缓存多层”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3嵌套路由中怎么使用keep-alive缓存多层”吧!
前言
keep-alive是Vue中的缓存标签， 组件在标签中的内容会被缓存下来;但是在多层嵌套的
router-view中， 只能缓存到该层下的
router-view， 由于路由嵌套比较常见，所以这里提供两种我觉得OK的解决方案。
解决思路
路由层级扁平化，在路由守卫中执行一个拍平的函数，将需要缓存的路由提升到第一层，这样处理会影响到路由层级，最直白的影响如对 面包屑 等功能有直接影响
把所有的
router-view都通过
keep-alive包裹起来， 通过
keep-alive的
include,
exclude来判断是否需要缓存。
Demo项目结构
router.ts
路由的结构大概是这样的 Layout > TableManage > (List, Detail, Add...)
路由层级扁平化
在路由的 afterEach 执行一个扁平化方法， 举例：
import router from '@/router/index'
import PageTitleUtils from '@/utils/PageTitleUtils'
import { ElMessage } from 'element-plus'
import useStore from '@/store/index'
import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const { user, routeStore } = useStore()
const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
NProgress.start()
if (user.hasToken()) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (user.hasUserInfo()) {
next()
NProgress.done()
} else {
try {
await user.getUserInfo()
await routeStore.setRoutes()
next({ ...to, replace: true })
NProgress.done()
} catch (error: any) {
routeStore.resetRoutes()
user.resetUserInfo()
ElMessage.error(error || 'Has Error')
next(`/login?redirect=${to.fullPath}`)
NProgress.done()
}
}
}
} else {
/* has no token */
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
NProgress.done()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.fullPath}`)
NProgress.done()
}
}
})
router.afterEach((to: any) => {
NProgress.done()
// set page title
const { meta }: any = to
document.title = PageTitleUtils.getPageTitle(meta.title)
// delayering router
delayeringRoute(to)
})
/**
* 递归处理多余的 layout : <router-view>，
* 让需要访问的组件保持在第一层 index : <router-view> 之下
*/
function delayeringRoute(to: RouteLocationNormalized) {
if (to.matched && to.matched.length > 2) {
for (let i = 0; i < to.matched.length; i++) {
const element = to.matched[i]
// 移除多余的 layout， 也许你项目中并不叫 layout ，自行修改此处
if (element.components?.default.name === 'layout') {
to.matched.splice(i, 1)
handleKeepAlive(to)
}
}
}
}以上代码示例中， delayeringRoute 是移除多余 layout 的方法， 在路由的afterEach方法中去移除，弊端很明显， 路由的结构受到了影响
给所有的 router-view 都嵌套上 keep-alive
这是我比较推荐的一种方法， 没什么副作用，也不麻烦， 毕竟所有的
router-view都一样，如果你使用的IDE是
vscode，可以直接把这段代码写进项目中的代码片段， 方便使用。
Layout的Main
<script lang="ts" setup name="AppMain">
import { useRoute } from 'vue-router'
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const route = useRoute()
const { tagview } = useStore()
const { cacheList } = storeToRefs(tagview)
</script>
<template>
<div class="app-main">
<router-view v-slot="{ Component }">
<keep-alive :include="cacheList">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</div>
</template>
<style scoped lang="scss">
</style>其他嵌套的路由， 不管几层，都可以这样处理
<script lang="ts" setup name="TableManage">
import { useRoute } from 'vue-router'
import useStore from '@/store';
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
const route = useRoute()
const { tagview } = useStore()
const { cacheList } = storeToRefs(tagview)
onMounted(() => {
tagview.addCacheList('TableManage')
})
</script>
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="cacheList">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</template>这样就可以实现嵌套路由的缓存了。