vue keep-alive實現(xiàn)多組件嵌套中個別組件存活不銷毀的操作
前言
最近在做一個精品課程后臺管理系統(tǒng)，其中涉及文件上傳和文件列表展示，我不想將他們寫入一個組件，故分開兩個組件實現(xiàn)，但由于上傳文件需要時間，這時要是用戶切換別的組件查看時，上傳文件組件就銷毀了，導(dǎo)致文件上傳失敗，所以需要采取keep-alive技術(shù)實現(xiàn)不銷毀上傳文件組件，同時也由于系統(tǒng)模塊較多，所以需要多組件進行嵌套。
問題：多組件嵌套下如何指定對應(yīng)的一個或多個組件存活呢？
*tips：要是對于Vue使用keep-alive的基本用法不熟悉的也可以點擊查看vue使用keep-alive的基本用法
配置路由加以判斷是否使用keep-alive
MVideoUpload，MFileUpload為上傳文件組件，故想之存活，而其他組件則需要掛起刷新數(shù)據(jù)，但由于MVideoUpload，MFileUpload分別嵌套在MVideos,MFiles組件中，為了保證跳轉(zhuǎn)其他模塊組件的時候，上傳視頻和上傳文件的模塊不銷毀（因為一旦父組件銷毀，子組件自然也銷毀了），所以兩個父組件也需要存活，只是之后需要再加以判斷存活那幾個子組件。
路由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'}
},
各父組件都是如此：
一層層判斷哪些組件需要存活不銷毀，從而實現(xiàn)對任意一個組件切換組件時使其存活不銷毀。
<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>
補充知識：vue頁簽?zāi)Ｊ?keep-alive解決關(guān)閉頁簽后緩存組件未銷毀問題
1.簡介
vue使用頁簽?zāi)Ｊ?，組件使用keep-alive緩存，發(fā)現(xiàn)頁簽關(guān)閉后緩存組件未銷毀，只是出于非活動狀態(tài)
2.解決
使用keep-alive的include屬性，這個屬性包含了緩存組件的名稱，可以將其賦值為動態(tài)屬性
頁簽store
export default {
state: {
current: layui.data('tag').current || {},//當前頁簽
list: layui.data('tag').list || []//頁簽列表
},
getters:{
/** 標簽名稱列表 */
tagNames (state) {
return state.list.map(function(tag){return tag.name})
}
}
}
list是頁簽對象列表
tagNames為頁簽名稱列表，即要緩存的頁簽組件名稱
<keep-alive v-if="isRouterAlive" :include="tagNames">
<router-view ></router-view>
</keep-alive>
...mapGetters({
tagNames:'tagNames'
})
這樣就保證了移除tag后，相應(yīng)的組件名稱也不會被緩存
以上這篇vue keep-alive實現(xiàn)多組件嵌套中個別組件存活不銷毀的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家介紹了Vue.js項目部署到服務(wù)器的詳細步驟，既然是部署到服務(wù)器，肯定是需要一個云的。具體思路步驟大家可以參考下本文2017-07-07
解決vuex數(shù)據(jù)異步造成初始化的時候沒值報錯問題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時候沒值報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue樹形結(jié)構(gòu)獲取鍵值的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue electron應(yīng)用調(diào)exe程序的實現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實現(xiàn)步驟,用Python寫了一個本地服務(wù)編譯成exe程序,在electron程序啟動后,自動執(zhí)行exe程序,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了vuex實現(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
本篇文章給大家總結(jié)了vue+webpack的實用技巧以及相關(guān)實例代碼分享，有興趣的朋友可以參考學(xué)習(xí)下。2018-04-04
ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實例，可以使用組件的所有方法，?在使用方法的時候直接this.$refs.（ref值）.方法（） 就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下2022-12-12
詳細講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
當我們自己開發(fā)了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復(fù)制一份過去對嗎?我們?yōu)槭裁床话l(fā)布一個 UI 組件庫給自己用呢?下面小編和大家來一起學(xué)習(xí)下吧2019-05-05
去除Element-Plus下拉菜單邊框的實現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進行開發(fā)時,我們可能會遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03![elementui[el-table]toggleRowSelection默認多選事件無法選中問題](http://img.jbzj.com/images/xgimg/bcimg9.png)
elementui[el-table]toggleRowSelection默認多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認多選事件無法選中問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11