標簽頁使用

• 1、點擊菜單項生成新的標簽頁
• 2、點擊標簽頁項實現頁面跳轉
• 3、bug

標簽頁放在main中
標簽頁el-tabs主要屬性：
（1）editableTabsValue：高亮表示被選中的標簽頁（通過name標識）
（2）editableTabs:標簽頁數組（存儲所有的標簽頁信息），屬性：name、title

<!-- 標簽頁--><el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab"><el-tab-panev-for="(item, index) in editableTabs":key="item.name":label="item.title":name="item.name"></el-tab-pane></el-tabs>

editableTabsValue、editableTabs存放在store中

1、點擊菜單項生成新的標簽頁

點擊菜單項生成新的標簽頁，添加新的標簽頁前要判斷標簽頁數組中是否已經包含該標簽頁，如果已經擁有該標簽頁，只需要選中該標簽頁。
示例：

通過點擊事件addTabs將菜單項的title和name添加到標簽頁數組中

<el-menu-item index="/index" @click="addTabs({title:'首頁',name:'/index'})"><i class="el-icon-s-home"></i><span slot="title">首頁</span> </el-menu-item> <el-menu-item :index="item.name" :route="{path:item.path}" v-for="item in menu.children" @click="addTabs(item)"><template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template> </el-menu-item>

store中對應的addTabs方法,添加一個新標簽項同時將其置為高亮，即選中狀態。

//添加標簽頁addTab(state,item){//當標簽頁數組中沒有當前標簽時才添加。let index = state.editableTabs.findIndex(e => e.name===item.name)if(index===-1){state.editableTabs.push({title: item.title,name: item.name})}//將新添加標簽頁激活：高亮state.editableTabsValue = item.name}

因為標簽頁數組editableTabs是動態更新的，所以在main中要動態獲取editableTabsValue 、editableTabs值。通過computed實現。
如下：

//動態監測變量值computed:{editableTabsValue: {get(){return this.$store.state.menus.editableTabsValue;},set(val){this.$store.state.menus.editableTabsValue = val;}},editableTabs:{get(){return this.$store.state.menus.editableTabs;},set(val){this.$store.state.menus.editableTabs = val;}}},

2、點擊標簽頁項實現頁面跳轉

在標簽頁中添加綁定事件@tab-click=“selectTab”
標簽頁部分

<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab"><el-tab-panev-for="(item, index) in editableTabs":key="item.name":label="item.title":name="item.name">

通過路由跳轉函數selectTab實現頁面跳轉。
前提，菜單項的name要和路由項的name相同

//點擊某個標簽頁實現路由跳轉selectTab(target){//新知識點//this.$router.push()不僅可以通過path跳轉,還可以通過name跳轉this.$router.push({name:target.name}).catch(err => {console.log(err)})}

router.push()參數詳解

3、bug

bug1: 當刷新頁面時，之前顯示的標簽頁都消失了。
原因：vuex store中的數據會隨著頁面刷新恢復默認。
解決方法：將editableTabs、editableTabsValue存放在session中。
在頁面刷新時將vuex里面的信息保存在sessionStorage，頁面加載時讀取session中的信息，并加載到store中。
在App.vue中操作

// 解決刷新頁面后，頁面path和頁面內容不同bugcreated() {//在頁面刷新時將vuex里面的信息保存在sessionStoragewindow.addEventListener("beforeunload",() => {sessionStorage.setItem("editableTabs",JSON.stringify(this.$store.state.menus.editableTabs))sessionStorage.setItem("editableTabsValue",this.$store.state.menus.editableTabsValue)})//頁面加載時讀取session中的信息，并加載到store中sessionStorage.getItem("editableTabsValue")&&this.$store.commit("getEditableTabsValue",sessionStorage.getItem("editableTabsValue"))sessionStorage.getItem("editableTabs")&&this.$store.commit("getEditableTabs",JSON.parse(sessionStorage.getItem("editableTabs")))},

對應store中的相關函數，getEditableTabsValue、getEditableTabs

//從session中獲取editableTabsValuegetEditableTabsValue(state,editableTabsValue){state.editableTabsValue = editableTabsValue},//從session中獲取editableTabsgetEditableTabs(state,editableTabs){state.editableTabs = editableTabs},

bug2: 如果直接通過url訪問某個菜單項，此時store和session中都沒有相關標簽頁信息，那么此時標簽頁會顯示空白。所以在App.vue中增加一個監聽watch

//監控//當用戶通過輸入url訪問界面時，此時store中和session中可能都沒有該頁面標簽頁的信息，這時就要通過watch解決//原理：在我們訪問對應path之前，就把path對應的title、name加入到store中watch: {$route(to,from){//當我前往的路由路徑不是login時，就把該路由信息加入到標簽頁數組中if(to.path !== '/login'){let obj = {title: to.meta.title,name: to.name}this.$store.commit("addTab",obj)}}}

注意：此處使用的時route。
route和router區別
bug3: 用戶退出后，store的信息沒有恢復默認

logout(){this.$axios.post('/logout').then(res => {//清除本地用戶信息localStorage.clear()sessionStorage.clear()//清除store中token信息this.$store.commit("resetState");//清除store中的標簽頁信息this.$store.commit("resetEditableTabs")this.$store.commit("resetEditableTabsValue")router.push('/login')})},

總結

以上是生活随笔為你收集整理的标签页使用及bug解决的全部內容，希望文章能夠幫你解決所遇到的問題。

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