vue Tab切替及びキャッシュページ処理のいくつかの方法

1.切替方法
ダイナミックコンポーネントを使って、みんなが分かると信じています。

//                 
<button @click="changeView">  view</button>
<component :is="currentView"></component>
 
import pageA from "@/views/pageA";
import pageB from "@/views/pageB";
 
computed: {
  currentView(){
      return this.viewList[this.index];
  }
},
 methods: {
  changeView() {
    this.index=(++this.index)%2
  }
}

注：これは1ページの下のいくつかのサブモジュールで使われることが多いです。一般的には切り替えが多いです。下のルートを使います。
ルートを使う（これはルーティングの設定の問題です。詳細には説明しません）
2.動的生成tab
一般的なUIフレームのtab切り替えは上のようになります。自分でいくつかのtabページに書き込むなどの構成が必要です。しかし、左のディレクトリをクリックしてtabページを作成したいですが、いつでも閉じられますか？

ルートにイベントをクリックして、ルートの住所をリストに保存して、別のフラットなtabディレクトリにレンダリングすればいいです。
もしあなたのレイアウトがこのようであるならば、左のディレクトリ、上のtab、字があるのはページです。

<menu>
  <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
    <router-link :to="item.path">{{item.name}}</router-link>
  <menu-item>
</menu>

<template>
  <menu class="left"/>//menu      
  <div class="right">
    <tab-list>
      <tab-item v-for="(item,index) in tabList" :key="index">
        <router-link :to="item.path">{{item.name}}</router-link>
        <icon class="delete" @click="deleteTab"></icon>
      </tab-item>
    </tab-list>
    <page-view>
      <router-view></router-view>//       
    </page-view>
  </div>
</template>

以上のコードは実際のコードではなく、大体の考えを提供します。addToTabListとdeleteTabはどうすれば配列方法の簡単なpushとsplice操作です。効果のためには、tabのactiveスタイルが必要かもしれません。ここではデモンストレーションを行いません。
3.キャッシュコンポーネント
tabの切り替えをするだけでは足りないです。結局、tabページは往復で操作します。彼が異なるtabで操作する進捗状況を保存する必要があります。例えば、記入したフォームの情報や、すでに調べたデータリストなどです。
コンポーネントはどうやってキャッシュしますか？
vueのkeep-aliveコンポーネントを使うだけです。
3.1 keep-alive

＜keep-alive＞はVueの内蔵コンポーネントであり、コンポーネント切り替え中に状態をメモリに残し、DOMの重複レンダリングを防ぐことができる。

＜keep-alive＞ 動的コンポーネントを包むと、廃棄するのではなく、アクティブでないコンポーネントの例がキャッシュされます。

＜keep-alive＞ を選択します <似ています。ただの抽象的なコンポーネントです。DOMツリーには描画されません。また、親のコンポーネントチェーンにもありません。たとえば、あなたは永遠にいます。 this.$parent 中に見つけられません keep-alive 。

注：keep-aliveで固定部品をキャッシュできないと無効になります。

//  
<keep-alive>
  <my-component></my-component>
</keep-alive>

3.2使用
3.2.1古いバージョンvue 2.1前の使用

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

ルート情報にrouterのメタ情報を設定する必要があります。

export default new Router({
  routes: [
    {
      path: '/a',
      name: 'A',
      component: A,
      meta: {
        keepAlive: false //      
      }
    },
    {
      path: '/b',
      name: 'B',
      component: B,
      meta: {
        keepAlive: true //      
      }
    }
  ]
})

3.2.2比較的新しくて簡単な使い方
すべてのコンポーネント/ルーティングを直接キャッシュします。

<keep-alive>
    <router-view/>
</keep-alive>
<keep-alive>
   <component :is="view"></component>
</keep-alive>

キャッシュが必要なコンポーネント／ルーティングをincludeを用いて処理する。
includeにはいくつかの用法があります。配列でもいいし、文字列は句読点で区切られてもいいし、正則を使う時はv-bindを使って結合します。

<keep-alive include="['a','b']">//  name a,b   
<keep-alive include ="a,b">//  name a,b   
<keep-alive :include="/^store/">//  name store     
    <router-view/>//   router-view
    <component :is="view"></component>//        
</keep-alive>

excludeを使用してキャッシュ不要なルーティングを排除する。
includeとは逆に、excludeでのコンポーネントはキャッシュされません。用法が類似しているので，詳しく述べるまでもない。
3.2.3ちょっと変わった状況です。
ページのジャンプ方式はA->CとB->Cの2種類がありますが、AからCまではキャッシュは不要です。BからCまではキャッシュが必要です。この時はルートのフックを使って古いバージョンの使い方と組み合わせて実現します。

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = false; //        
    next();
  }
};

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    //          meta
    to.meta.keepAlive = true; //     
    next();
  }
};

3.3キャッシュコンポーネントのライフサイクル関数
キャッシュコンポーネントが初めて開いた時は、普通のコンポーネントと同じで、createdを実行する必要があります。 mountedなどの関数。
しかし、このいくつかの普通のコンポーネントのライフサイクル関数は、再活性化されても停止されても実行されません。二つの比較的ユニークなライフサイクル関数が実行されます。

activated

これはキャッシュされたコンポーネントが再起動されるときに呼び出します。

deactivated

これはキャッシュされたコンポーネントが停止された時に呼び出します。
以上がevue Tab切替とキャッシュページ処理のいくつかの方法の詳細です。vue Tab切替とキャッシュページ処理に関する資料は他の関連記事に注目してください。