前言

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、三明網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為三明等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

相信tab切換對于大家來說都不算陌生，后臺管理系統(tǒng)中多會用到。如果不知道的話，可以看一下瀏覽器上方的標(biāo)簽頁切換，大概效果就是這樣。

1.如何切換

使用動態(tài)組件,相信大家都能看懂（部分代碼省略）

//通過點(diǎn)擊就可以實(shí)現(xiàn)兩個(gè)組件來回切換
<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
 }
}

注：這個(gè)多用于單頁下的幾個(gè)子模塊使用，一般切換比較多使用下面的路由

使用路由（這個(gè)就是配置路由的問題了，不作贅述）2.動態(tài)生成tab

一般UI框架給我們的tab切換都像是上面的那種，需要自己寫入幾個(gè)tab頁之類的配置。但是我們?nèi)绻胍ㄟ^點(diǎn)擊左邊的目錄來生成一個(gè)tab頁并且可以隨時(shí)關(guān)閉呢（如下圖）？

只需要給路由一個(gè)點(diǎn)擊事件，把你的路由地址保存到一個(gè)列表，渲染成另一個(gè)平鋪的tab目錄即可

假設(shè)你的布局是這樣，左邊的目錄，上邊的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>

以上代碼并非實(shí)際代碼，只提供一個(gè)大概的思路。至于addToTabList和deleteTab怎么做就是數(shù)組方法的簡單push和splice操作了。為了效果好看，我們可能還需要一些tab的active樣式，這里不作演示。

3.緩存組件

僅僅是做tab切換，遠(yuǎn)遠(yuǎn)是不夠的，畢竟大家想要tab頁就是要來回切換操作，我們需要保存他在不同tab里操作的進(jìn)度，比如說填寫的表單信息，或者已經(jīng)查詢好的數(shù)據(jù)列表等。
那么我們要怎么緩存組件呢？
只需要用到vue中的keep-alive組件

3.1 keep-alive

• <keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
• <keep-alive> 包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們。
• <keep-alive> 與 <transition>相似，只是一個(gè)抽象組件，它不會在DOM樹中渲染(真實(shí)或者虛擬都不會)，也不在父組件鏈中存在，比如：你永遠(yuǎn)在 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>

需要在路由信息里面設(shè)置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有幾種用法，可以是數(shù)組，字符串用標(biāo)點(diǎn)隔開，也可以是正則，使用正則的時(shí)候需要使用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>//也可以是動態(tài)組件
</keep-alive>

使用exclude來排除不需要緩存的路由

跟include正好相反，在exclude里的組件不會被緩存。用法類似，不作贅述

3.2.3 一種比較奇怪的情況

當(dāng)頁面跳轉(zhuǎn)方式有A->C和B->C兩種，但是我們從A到C的時(shí)候，不需要緩存，從B到C的時(shí)候需要緩存。這時(shí)候就要用到路由的鉤子結(jié)合老版本用法來實(shí)現(xiàn)了。

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false; // 讓下一頁不緩存
  next();
 }
};

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 設(shè)置下一個(gè)路由的 meta
  to.meta.keepAlive = true; //下一頁緩存
  next();
 }
};

3.3 緩存組件的生命周期函數(shù)

緩存組件第一次打開的時(shí)候，和普通組件一樣，也需要執(zhí)行created, mounted等函數(shù)。
但是在被再次激活和被停用時(shí)，這幾個(gè)普通組件的生命周期函數(shù)都不會執(zhí)行，會執(zhí)行兩個(gè)比較獨(dú)特的生命周期函數(shù)。

activated
這個(gè)會在緩存的組件重新激活時(shí)調(diào)用

deactivated
這個(gè)會在緩存的組件停用時(shí)調(diào)用

結(jié)語

這個(gè)是很基礎(chǔ)的知識，放在筆記里很久了，不過之前記得有點(diǎn)亂，今天拿出來抖一下塵~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：vueTab切換以及緩存頁面處理的幾種方式
當(dāng)前路徑：http://www.chinadenli.net/article38/gjojpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、云服務(wù)器、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)