前言
相信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 } }
注:這個多用於單頁下的幾個子模塊使用,一般切換比較多使用下面的路由
- 使用路由(這個就是配置路由的問題了,不作贅述)
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
這個會在緩存的組件停用時調用
結語
這個是很基礎的知識,放在筆記裏很久了,不過之前記得有點亂,今天拿出來抖一下塵~
如果有建議或者有不對的地方,請在評論區指出,謝謝大家。