vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的操作
前言
最近在做一個(gè)精品課程后臺(tái)管理系統(tǒng)，其中涉及文件上傳和文件列表展示，我不想將他們寫入一個(gè)組件，故分開兩個(gè)組件實(shí)現(xiàn)，但由于上傳文件需要時(shí)間，這時(shí)要是用戶切換別的組件查看時(shí)，上傳文件組件就銷毀了，導(dǎo)致文件上傳失敗，所以需要采取keep-alive技術(shù)實(shí)現(xiàn)不銷毀上傳文件組件，同時(shí)也由于系統(tǒng)模塊較多，所以需要多組件進(jìn)行嵌套。
問題：多組件嵌套下如何指定對(duì)應(yīng)的一個(gè)或多個(gè)組件存活呢？
*tips：要是對(duì)于Vue使用keep-alive的基本用法不熟悉的也可以點(diǎn)擊查看vue使用keep-alive的基本用法
配置路由加以判斷是否使用keep-alive
MVideoUpload，MFileUpload為上傳文件組件，故想之存活，而其他組件則需要掛起刷新數(shù)據(jù)，但由于MVideoUpload，MFileUpload分別嵌套在MVideos,MFiles組件中，為了保證跳轉(zhuǎn)其他模塊組件的時(shí)候，上傳視頻和上傳文件的模塊不銷毀（因?yàn)橐坏└附M件銷毀，子組件自然也銷毀了），所以兩個(gè)父組件也需要存活，只是之后需要再加以判斷存活那幾個(gè)子組件。
路由js：
{
path:'resource',
name:'MResource',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/Resource'),
children:[
{
path: 'videos',
name: 'MVideos',
meta:{
keepAlive:true, //包含存活組件
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/videos/Videos'),
children:[
{
path:'list',
name:'MVideoList',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/videos/VideosList'),
},
{
path:'upload',
name:'MVideoUpload',
meta:{
keepAlive:true, //需要存活
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/videos/UploadVideo'),
},
{
path:'update',
name:'MVideoUpdate',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/videos/UpdateVideo'),
},
{
path:'detail',
name:'MVideoDetail',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/videos/VideoDetail'),
},
],
redirect:{name: 'MVideoList'}
},
{
path:'files',
name:'MFiles',
meta:{
keepAlive:true, //包含存活組件
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/files/Files'),
children:[
{
path: 'list',
name: 'MFileList',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/files/FilesList'),
},
{
path:'upload',
name:'MFileUpload',
meta:{
keepAlive:true, //需要存活
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/files/UploadFile'),
},
{
path:'update',
name:'MFileUpdate',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/files/UpdateFile'),
},
{
path:'detail',
name:'MFileDetail',
meta:{
auth:true //是否需要登錄
},
component: () => import('../pages/manage/resource/files/FileDetail'),
},
],
redirect:{name: 'MFileList'}
},
],
redirect:{name: 'MFiles'}
},
各父組件都是如此：
一層層判斷哪些組件需要存活不銷毀，從而實(shí)現(xiàn)對(duì)任意一個(gè)組件切換組件時(shí)使其存活不銷毀。
<transition name="component-fade" mode="out-in"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> </transition> <transition name="component-fade" mode="out-in"> <router-view v-if="!$route.meta.keepAlive" /> </transition>
補(bǔ)充知識(shí)：vue頁(yè)簽?zāi)Ｊ?keep-alive解決關(guān)閉頁(yè)簽后緩存組件未銷毀問題
1.簡(jiǎn)介
vue使用頁(yè)簽?zāi)Ｊ?，組件使用keep-alive緩存，發(fā)現(xiàn)頁(yè)簽關(guān)閉后緩存組件未銷毀，只是出于非活動(dòng)狀態(tài)
2.解決
使用keep-alive的include屬性，這個(gè)屬性包含了緩存組件的名稱，可以將其賦值為動(dòng)態(tài)屬性
頁(yè)簽store
export default {
state: {
current: layui.data('tag').current || {},//當(dāng)前頁(yè)簽
list: layui.data('tag').list || []//頁(yè)簽列表
},
getters:{
/** 標(biāo)簽名稱列表 */
tagNames (state) {
return state.list.map(function(tag){return tag.name})
}
}
}
list是頁(yè)簽對(duì)象列表
tagNames為頁(yè)簽名稱列表，即要緩存的頁(yè)簽組件名稱
<keep-alive v-if="isRouterAlive" :include="tagNames">
<router-view ></router-view>
</keep-alive>
...mapGetters({
tagNames:'tagNames'
})
這樣就保證了移除tag后，相應(yīng)的組件名稱也不會(huì)被緩存
以上這篇vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
訪問百度音樂API需要傳遞音樂類型參數(shù)，而這些參數(shù)是存在musictype.json中，現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)，如何實(shí)現(xiàn)呢，下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù)，感興趣的朋友一起看看吧2022-09-09
vue3中vite.config.js相關(guān)常用配置超詳細(xì)講解
在Vue3項(xiàng)目中vite.config.js文件是Vite構(gòu)建工具的配置文件,它用于定義項(xiàng)目的構(gòu)建和開發(fā)選項(xiàng),這篇文章主要介紹了vue3中vite.config.js相關(guān)常用配置的相關(guān)資料,需要的朋友可以參考下2025-04-04
VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
vue2結(jié)合element-ui實(shí)現(xiàn)TreeSelect樹選擇功能
這篇文章主要為大家詳細(xì)介紹了vue2如何結(jié)合element-ui實(shí)現(xiàn)TreeSelect樹選擇功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js devtools遇到問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
這篇文章主要介紹了vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
今天小編就為大家分享一篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09