目錄1.如何切換2.動(dòng)態(tài)生成tab3.緩存組件3.1 keep-alive3.2 使用3.3 緩存組件的生命周期函數(shù)1.如何切換

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

//通過(guò)點(diǎn)擊就可以實(shí)現(xiàn)兩個(gè)組件來(lái)回切換<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è)多用于單頁(yè)下的幾個(gè)子模塊使用，一般切換比較多使用下面的路由

使用路由（這個(gè)就是配置路由的問(wèn)題了，不作贅述）

2.動(dòng)態(tài)生成tab

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

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

假設(shè)你的布局是這樣，左邊的目錄，上邊的tab，有字的是頁(yè)面

<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 />//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 @click='deleteTab'></icon> </tab-item> </tab-list> <page-view> <router-view></router-view>//這里是頁(yè)面展示 </page-view> </div></template>

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

3.緩存組件

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

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

注：不能使用keep-alive來(lái)緩存固定組件，會(huì)無(wú)效

//無(wú)效<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 比較新而且簡(jiǎn)單的用法

直接緩存所有組件/路由

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

使用include來(lái)處理需要緩存的組件/路由include有幾種用法，可以是數(shù)組，字符串用標(biāo)點(diǎn)隔開(kāi)，也可以是正則，使用正則的時(shí)候需要使用v-bind來(lái)綁定。

<keep-alive include='[’a’,’b’]'>//緩存name為a,b的組件<keep-alive include ='a,b'>//緩存name為a,b的組件<keep-alive :include='/^store/'>//緩存name以store開(kāi)頭的組件 <router-view/>//可以為router-view <component :is='view'></component>//也可以是動(dòng)態(tài)組件</keep-alive>

使用exclude來(lái)排除不需要緩存的路由跟include正好相反，在exclude里的組件不會(huì)被緩存。用法類(lèi)似，不作贅述

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

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

export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 設(shè)置下一個(gè)路由的 meta to.meta.keepAlive = true; //下一頁(yè)緩存 next(); }};3.3 緩存組件的生命周期函數(shù)

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

activated

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

deactivated

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

以上就是vue Tab切換以及緩存頁(yè)面處理的幾種方式的詳細(xì)內(nèi)容，更多關(guān)于vue Tab切換以及緩存頁(yè)面處理的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！