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

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

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

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

keep-alive 組件對(duì)第三級(jí)及以上級(jí)的路由頁(yè)面緩存失效

探索方案：

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

實(shí)現(xiàn)方式

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

直接看原有代碼（問(wè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ù)樹(shù)形結(jié)構(gòu)做了處理（在store里寫(xiě)的，只展示出關(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) {
? ??? ?// 若有子級(jí) 先創(chuàng)建router-view容器，再去遞歸（重點(diǎn)重點(diǎn)重點(diǎn)）
? ? ? tmp.component = {
? ? ? ??? ?render: c => c('router-view')
? ? ? }
? ? ? tmp.children = changeAsyncRoutes(tmp.children)
? ? } else {
? ? // 沒(méi)有子級(jí)菜單直接將component字符串解析成組件對(duì)象
? ? ? tmp.component = importMethod(tmp.component)
? ? }
? ? res.push(tmp)
? })
? return res
}

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

1、新建MenuMain.vue組件如下

// src/layout/component/MenuMain.vue
// 提供多級(jí)菜單的容器
<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ù)時(shí)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組件的名稱

cachedViews: ['MenuMain']

到此這篇關(guān)于vue中keep-alive組件實(shí)現(xiàn)多級(jí)嵌套路由的緩存的文章就介紹到這了,更多相關(guān)vue keep-alive多級(jí)嵌套路由緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: