技術(shù)棧：vue，vue-router

是什么

keep-alive是vue中提供緩存不活動組件的標簽，可以支持一些如返回頁面，緩存當前分頁信息、搜索信息，或則表單緩存的場景。

為什么

為什么要使用這個標簽?zāi)?？目前在前端項目中，緩存方案無非就是

• 瀏覽器緩存json數(shù)據(jù)，再進行解析
• vuex狀態(tài)管理方案
• keepalive標簽保留組件狀態(tài)
  而keepalive組件是vue官方支持的一種比較好的解決方案，在使用方面也比較簡單。

怎么做

1. vue-router配置路由參數(shù)
   其實很多項目中配置的路由參數(shù)都不一樣，所以這里把需要的參數(shù)全部放進meta里，這樣保證不受其他路由配置項影響

{
    path: '/foo',
    meta: {
        keepAlive: true,
        name: 'ComponentName' // 對應(yīng)vue文件里的name屬性，如果其他配置項帶了這個參數(shù)可以直接使用，這里用處主要是可以注銷不用的keepalive組件
    }
}

2.<router-view>
常見的router-view配置都是這樣的，這里keepalive標簽比平時配置多了一個:include屬性，用于注銷不用的組件。用一個keepAliveComp判斷當前標簽頁的緩存頁面，如果從標簽頁移除則注銷該緩存頁面。標簽頁的數(shù)組需要注意去重。

<keep-alive :include="keepAliveComp">
            <router-view
                          class="avue-view"
                          v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view
                        class="avue-view"
                        v-if="!$route.meta.keepAlive" />

export default {
  computed: {
    keepAliveComp() {
      // 緩存keepalive列表 用于注銷不在標簽頁的keepalive組件
      let arr = []
      this.tagList.map(item => {   //tagList是標簽頁的數(shù)組
        if (item.meta.keepAlive) return arr.push(item.meta.name)
      })
      return arr
    }
  }
}

同一個組件重復(fù)keepalive無效

因為當前處理keepalive的邏輯，是利用了組件中的name屬性，當使用同一個組件時，name就會相同，那怎么解決這個問題呢？經(jīng)過思考和借助網(wǎng)絡(luò)力量，找到一下兩種比較合適的解決方案

• router-view上添加key屬性
• 用到同一個組件的地方包裝一層組件，賦予不同的name

我一開始用的是第二種方法，但后面總覺得不太合理，于是翻了很多文章，試了很多途徑，最后發(fā)現(xiàn)第一種方法更加有效，并且去除了許多沒用的代碼。
原理是利用了key更新組件時判斷兩個節(jié)點是否相同，由于key不同，判斷當前組件名字即使一樣，其實也不是同一個組件。

參考： vue的key簡單理解
vue，keep-alive，不同路由指向同一個組件，如何分別緩存頁面狀態(tài)