Tab切換以及緩存頁面處理的幾種方式

前言

相信tab切換對於你們來講都不算陌生，後臺管理系統中多會用到。若是不知道的話，能夠看一下瀏覽器上方的標籤頁切換，大概效果就是這樣。

1.如何切換

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
     }
   }

   注：這個多用於單頁下的幾個子模塊使用，通常切換比較多使用下面的路由

2. 使用路由（這個就是配置路由的問題了，不做贅述）

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> 與 <transition>類似，只是一個抽象組件，它不會在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的元信息meta

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兩種，可是咱們從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
  這個會在緩存的組件停用時調用

結語

這個是很基礎的知識，放在筆記裏好久了，不過以前記得有點亂，今天拿出來抖一下塵~
若是有建議或者有不對的地方，請在評論區指出，謝謝你們。