vue中keep-alive組件實現(xiàn)多級嵌套路由的緩存

更新時間：2022年03月25日 10:59:43 作者：花名森林

本文主要介紹了vue中keep-alive組件實現(xiàn)多級嵌套路由的緩存，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

現(xiàn)狀(問題):

keep-alive 組件對第三級及以上級的路由頁面緩存失效

探索方案：

方案1、直接將路由扁平化配置，都放在一級或二級路由中
方案2、再一層緩存組件用來過渡，并將其name配置到include中

實現(xiàn)方式

方案1不需要例子，按規(guī)則配置路由就行重點介紹方案2
因為我用了vue-element-admin做了架構(gòu)，并且項目中我將菜單和路由全部通過服務(wù)端返回做了統(tǒng)一配置，所以我只能用方案2來實現(xiàn)。

直接看原有代碼（問題代碼）

// src/layout/component/AppMain.vue
<template>
?<section class="app-main">
?? ? ?<transition name="fade-transform" mode="out-in">
?? ??? ? ? <keep-alive :include="cachedViews">
?? ??? ? ? ? ?? ?<router-view :key="key" />
?? ??? ? ? </keep-alive>
?? ? ?</transition>
?</section>
</template>

<script>
export default {
? name: 'AppMain',
? computed: {
? ? cachedViews() {
? ? ? return this.$store.state.tagsView.cachedViews
? ? },
? ? key() {
? ? ? return this.$route.path
? ? }
? }
}
</script>

我從后端那到數(shù)據(jù)后，根據(jù)樹形結(jié)構(gòu)做了處理（在store里寫的，只展示出關(guān)鍵代碼）

// 拿到數(shù)據(jù)先循環(huán)第一層將Layout付給組件
?generateRoutes({ commit }, routeList) {
? ? return new Promise(resolve => {
? ? ? routeList.forEach(items => {
? ? ? ? items.component = Layout
? ? ? ? // 如果有子菜單直接再循環(huán)賦值
? ? ? ? items.children = changeAsyncRoutes(items.children)
? ? ? })
? ? ? commit('SET_ROUTES', routeList)
? ? ? resolve(routeList)
? ? })
? }
function changeAsyncRoutes(routes) {
? const res = []
? routes.forEach(route => {
? ? const tmp = { ...route }
? ? if (tmp.children && tmp.children.length !== 0) {
? ??? ?// 若有子級 先創(chuàng)建router-view容器，再去遞歸（重點重點重點）
? ? ? tmp.component = {
? ? ? ??? ?render: c => c('router-view')
? ? ? }
? ? ? tmp.children = changeAsyncRoutes(tmp.children)
? ? } else {
? ? // 沒有子級菜單直接將component字符串解析成組件對象
? ? ? tmp.component = importMethod(tmp.component)
? ? }
? ? res.push(tmp)
? })
? return res
}

這種寫法已經(jīng)很完美了，可惜，我遇到了三級菜單不能緩存的問題
直接上解決問題的代碼

1、新建MenuMain.vue組件如下

// src/layout/component/MenuMain.vue
// 提供多級菜單的容器
<template>
? <keep-alive :include="cachedViews">
? ? <router-view :key="key" />
? </keep-alive>
</template>

<script>
export default {
? name: 'MenuMain', // 必須命名
? computed: {
? ? cachedViews() {
? ? ? return this.$store.state.tagsView.cachedViews
? ? },
? ? key() {
? ? ? return this.$route.path
? ? }
? }
}
</script>

2、將此容器取代處理數(shù)據(jù)時render的 router-view 容器

// 引入組件
import MenuMain from '@/layout/components/MenuMain'

function changeAsyncRoutes(routes) {
? const res = []
? routes.forEach(route => {
? ? const tmp = { ...route }

? ? if (tmp.children && tmp.children.length !== 0) {
? ? // 注意看著里
? ? ? tmp.component = MenuMain
? ? ? // {
? ? ? // ? render: c => c('router-view')
? ? ? // }
? ? ? tmp.children = changeAsyncRoutes(tmp.children)
? ? } else {
? ? ? tmp.component = importMethod(tmp.component)
? ? }
? ? res.push(tmp)
? })
? return res
}

3、把store中的 cachedViews 數(shù)組中始終保存MenuMain組件的名稱