溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的方法

發(fā)布時(shí)間：2020-11-02 16:05:38 來(lái)源：億速云 閱讀：520 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

配置路由加以判斷是否使用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'
})

看完上述內(nèi)容，你們對(duì)vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的方法有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手