前言

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

1.如何切換

使用動態組件,相信大家都能看懂(部分代碼省略)//通過點擊就可以實現兩個組件來回切換 切換view 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，有字的是頁面

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

3.緩存組件

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

3.1 keep-alive

• 是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。
• 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
• 與 相似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，比如：你永遠在 this.$parent 中找不到 keep-alive 。

注：不能使用keep-alive來緩存固定組件，會無效

3.2 使用

3.2.1 老版本vue 2.1之前的使用

需要在路由信息里面設置router的元信息meta

3.2.2 比較新而且簡單的用法

• 直接緩存所有組件/路由

• 使用include來處理需要緩存的組件/路由

include有幾種用法，可以是數組，字符串用標點隔開，也可以是正則，使用正則的時候需要使用v-bind來綁定。

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

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

3.2.3 一種比較奇怪的情況

當頁面跳轉方式有A->C和B->C兩種，但是我們從A到C的時候，不需要緩存，從B到C的時候需要緩存。這時候就要用到路由的鉤子結合老版本用法來實現了。

3.3 緩存組件的生命周期函數

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

• activated
  這個會在緩存的組件重新激活時調用
• deactivated
  這個會在緩存的組件停用時調用

結語

這個是很基礎的知識，放在筆記里很久了，不過之前記得有點亂，今天拿出來抖一下塵~
如果有建議或者有不對的地方，請在評論區指出，謝謝大家。

喜歡小編文章的可以點個贊關注小編哦，小編每天都會給大家更新文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，那么幫忙轉發一下然后再關注小編后私信【1】可以得到我整理的這些前端資料了(私信方法：點擊我頭像進我主頁有個上面有個私信按鈕)

總結

以上是生活随笔為你收集整理的uniapp滑动切换tab标签_Web前端，Tab切换，缓存，页面处理的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。