溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關vue keep-alive實現多組件嵌套中個別組件存活不銷毀的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
配置路由加以判斷是否使用keep-alive
MVideoUpload，MFileUpload為上傳文件組件，故想之存活，而其他組件則需要掛起刷新數據，但由于MVideoUpload，MFileUpload分別嵌套在MVideos,MFiles組件中，為了保證跳轉其他模塊組件的時候，上傳視頻和上傳文件的模塊不銷毀（因為一旦父組件銷毀，子組件自然也銷毀了），所以兩個父組件也需要存活，只是之后需要再加以判斷存活那幾個子組件。
路由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'}
},各父組件都是如此：
一層層判斷哪些組件需要存活不銷毀，從而實現對任意一個組件切換組件時使其存活不銷毀。
<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頁簽模式+keep-alive解決關閉頁簽后緩存組件未銷毀問題
1.簡介
vue使用頁簽模式，組件使用keep-alive緩存，發現頁簽關閉后緩存組件未銷毀，只是出于非活動狀態
2.解決
使用keep-alive的include屬性，這個屬性包含了緩存組件的名稱，可以將其賦值為動態屬性
頁簽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'
})看完上述內容，你們對vue keep-alive實現多組件嵌套中個別組件存活不銷毀的方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
