vue keep-aliveダイナミックキャッシュページの使用

keep-aliveの使用
ビジネスではtab_を使用したプロジェクトのニーズによく遭遇します.barは開いているページを管理し、切り替え中にページの状態をキャッシュしたい場合はラベルページを閉じ、左側のメニューバーからページを開くと再ロードされます.以下に、いくつかの一般的なソリューションとメリットとデメリットと限界を示します.
keep-aliveの公式ドキュメント:https://cn.vuejs.org/v2/api/#keep-alive
1:router-viewを使用してv-ifを組み合わせる:
適用:元のrouter関連コンポーネントに匿名コンポーネント(nameプロパティを設定していない)が存在する利点:改造コストの低い欠点:新しく開いたページがあるとkeep-aliveコンポーネントが再ロードされ、すべてのキャッシュが失われる

// home.vue
//   pageLoding    keep-alive  
<div class="firame-router" v-if="!$store.state.pageLoding">
   <keep-alive>
       <router-view v-if="$store.state.bar_data_name.indexOf($route.name)>-1"></router-view>
   </keep-alive>
       <router-view v-if="$store.state.bar_data_name.indexOf($route.name)<0"></router-view>
</div>

// store/index.js
//   bar_data          menu_name   
   refresh_bar_data(s, v) {
     
     s.bar_data = v
     //    bar_data_name
     let bar_data = v
     let bar_data_name = []
     bar_data.forEach(element => {
     
       let name = s.menu_map.get(element).code
       bar_data_name.push(name)
     });
     s.bar_data_name = bar_data_name
   },

2:keep-aliveを使用したincludeパラメータ
適用:すべての関連routerのページコンポーネントにname属性が設定されている欠点:元のプロジェクトには匿名コンポーネントが存在し、name属性を追加する必要があります(includeはrouter_nameではなくコンポーネントnameのみを識別します)

// include             name  (  router_name)
<div class="firame">
    {
     {
     $store.state.bar_data_name}} //     bar  
    <div class="firame-router">
        <keep-alive>
            <router-view :include="$store.state.bar_data_name"></router-view>
        </keep-alive>
    </div>
</div>

3:keep-aliveダイナミッククリアキャッシュ(推奨)
適用:システムに匿名コンポーネントが一部存在し、keep-aliveキャッシュを柔軟に制御する必要がある
3.1最初にすべてのコンポーネントをキャッシュする

<div class="firame-router">
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</div>

3.2 vuexに現在開いているtab_を保存barデータ(具体的な書き方は人によって異なり、ここでは考え方のみを示す)

refresh_bar_data(s, v) {
     
      s.bar_data = v
      //    bar_data_name
      let bar_data = v
      let bar_data_name = []
      bar_data.forEach(element => {
     
        let name = s.menu_map.get(element).code
        bar_data_name.push(name)
      });
      s.bar_data_name = bar_data_name
    },

3.3 mixinファイルでルーティングガードを定義する(キー)
現在のページチェックを閉じると、beforeRouteLeaveがトリガーされ、現在閉じているtabがtab_に存在するかどうかを判断します.barリストで、存在しない場合は、現在のコンポーネントキャッシュが消去されます.

beforeRouteLeave(to, from, next) {
     
        let flag = true
        this.$store.state.bar_data_name.forEach(e => {
     
        // bar_data_name     tabs     
          if(from.name == e) {
     
            flag = false
          }
        }) 
        if(flag && this.$vnode.parent && this.$vnode.parent.componentInstance.cache) {
     
          let key = this.$vnode.tag.split('-')[2]  //         key
          let cache = this.$vnode.parent.componentInstance.cache  //      
          let keys = this.$vnode.parent.componentInstance.keys  //       
          if(cache[key] != null) {
     
            delete cache[key]
            let index = keys.indexOf(key)
            if(index > -1) {
     
              keys.splice(index, 1)
            }
          }
        }
        next()
      },

3.4 tab_closeの関数で現在のルーティング以外のページラベルをキャッシュ処理する
閉じられたページタグが現在のルーティングが存在しない場合は、ルーティングの変更がないため、ルーティングガードをトリガーすることはできません.ページを閉じた場所でいくつかの操作を行う必要があります.

tabs_close(m) {
     
    //             ,refresh_bar_data   active  (  beforeRouteLeave)
    if (this.$parent.active_menu_key != m.id) {
     
        this.$router.push({
      name: m.code });
    }
    let set = new Set(this.bar_data)
        set.delete(m.id)
    let data = Array.from(set)
    let key = data[this.index] || data[this.index - 1]
    this.$store.commit('refresh_bar_data', [...set])
    this.$parent.active_menu_key = key
},

3.5現在のすべてのラベルをすばやく閉じるとき

clear_all_tabs() {
     
    this.$store.commit('refresh_bar_data', [])
    this.$parent.active_menu_key = -1
    //       keep-alive  
    // this.$parent ||  home.vue  
    // this.$parent.$refs['router_view'] ||  router_view     
    // this.$parent.$refs['router_view'].$vnode.parent.componentInstance.cache || keep-alive  
    try {
     
        this.$parent.$refs['router_view'].$vnode.parent.componentInstance.cache = []
    } catch (error) {
     
        console.log(error)
    }
}