快捷導(dǎo)航

解決keep-alive同一個(gè)組件不緩存問題

更新時(shí)間：2024年02月11日 11:00:09 作者：_jeneen

這篇文章給大家介紹了如何解決keep-alive同一個(gè)組件不緩存問題,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

問題描述

發(fā)現(xiàn)左側(cè)菜單打開的路徑和組件不同時(shí)
即如下配置的 User.vue, Login.vue 這兩個(gè)頁面時(shí)，keep-alive會(huì)生效，但是切換到 /app/1/false就不會(huì)進(jìn)行緩存。
在各組件中的生命周期加上打印信息，包括 activated, deactivated。

// 路由配置
{  // tab3
  path: '/user',
  name: 'User',
  component: () => import('../User.vue'),
},
{
  path: '/',
  name: 'Login',
  component: () => import('../Login.vue'),
},
{ // tab1, tab2
  path: '/app/:id/:single',
  name: 'App',   // 實(shí)際每個(gè)菜單的 name  和 path 一樣
  component: () => import('../App.vue'),
},

// 綠色框組件中
<transition name="fade-transform" mode="out-in">
    <el-main>
      <keep-alive :include="cachedTags">
        <router-view :key="key" />
      </keep-alive>
    </el-main>
  </transition>

get cachedTags() {
    return TagsViewModule.cachedTags  即 // 菜單的 name 的組合
  }

  get key() {
    return this.$route.path
}

菜單	name	path
tab1	/app/1/false	/app/1/false
tab2	/app/2/false	/app/2/false
tab3	/user	/user
操作：點(diǎn)擊順序
1->2->3->2->3

// 打印如下
created in App.vue
mounted in App.vue
id: 2 // 切換 tab2 時(shí)，數(shù)據(jù)發(fā)生變化
created in User.vue // 切換 tab3 
mounted in User.vue
activated in User.vue
created in App.vue  // 切換 tab2 
deactivated in User.vue  
mounted in App.vue
activated in User.vue  // 切換 tab3

// cachedTags : [ '/user',  '/app/1/false',  '/app/2/true' ]

tab3第一次進(jìn)入時(shí)會(huì)觸發(fā) created, 之后每次切換都是走 activated鉤子，其緩存了搜索輸入；
在 tab1->tab2時(shí)只根據(jù)路由中的 id信息進(jìn)行了響應(yīng)式變化操作，tab3 -> tab2時(shí)，又重新渲染了 App.vue組件

解決方案

針對(duì) 帶附帶信息的路由的 name進(jìn)行統(tǒng)一處理。

// 處理后 cachedTags : [ 'User', 'App' ]
const viewName = this.$route.name
if (view.name.startsWith('app/')) {
  viewName = 'App'  // 注意要與 App.vue 組件里的 name 一致
}
// 緩存依據(jù)于 router name
if (viewName === null) return
if (this.cachedTags.includes(viewName)) return
this.cachedTags.push(viewName)