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>这样就可以实现嵌套路由的缓存了。 附上演示
到此这篇关于Vue3嵌套路由中使用keep-alive缓存多层的实现的文章就介绍到这了,更多相关Vue3 keep-alive缓存多层内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！