element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐

更新時間：2022年08月12日 09:59:42 作者：瀟藍(lán)諾依

本文主要介紹了element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

樣式

準(zhǔn)備

搭建好的vue腳手架（elementui，router，vuex）
elementui（NavMenu 導(dǎo)航菜單，Tabs 標(biāo)簽頁）

思路

將打開的所有路由放到一個棧里（openTab:[]），tabs顯示遍歷openTab
初始狀態(tài)，將首頁推入棧，并設(shè)置激活狀態(tài)
當(dāng)切換路由時(監(jiān)聽路由變化),判斷棧里是否存在這個路由，若存在，只改變激活狀態(tài)；若不存在，則推入棧，并改變激活狀態(tài)。
tabs 切換，調(diào)用@tab-click='tabClick’方法，跳轉(zhuǎn)路由，（路由變化，走上一步中“若存在，只改變激活狀態(tài)”）
tabs 移除，調(diào)用@tab-remove=‘tabRemove’ 方法，移除棧（openTab）中對應(yīng)的路由，若移除的路由是激活狀態(tài)，那么跳轉(zhuǎn)路由到棧中最后一個（路由變化）；若移除的路由非激活狀態(tài)，不做修改

涉及到的內(nèi)容

vuex state:路由棧、激活狀態(tài) mutations: 添加、移除、修改激活狀態(tài)
watch
mounted
tab 切換、移除兩個方法

搭建

搭建頁面框架

slider組件

<template>
      <el-menu
        :default-active="$route.path"
        class="slider"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        >
        <el-menu-item index="/main" >
          <i class="el-icon-menu"></i>
          <span slot="title">首頁</span>
        </el-menu-item>
        
        <el-submenu v-for="(item,index) in menuList" :key="index" :index='item.id'>
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item v-for="child in item.children" :key="child.id" :index='child.index'>{{child.childtitle}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
</template>

<script>
export default {
  name: 'Slider',
  data(){
    return {
      menuList:[
        {
          id:'1',
          title: '導(dǎo)航1',
          icon:'el-icon-location',
          children:[
            {
              index:'/page1',
              childtitle:'導(dǎo)航1page1'
            },
            {
              index:'/page2',
              childtitle:'導(dǎo)航1page2'
            },
          ]
        },
        {
          id:'2',
          title: '導(dǎo)航2',
          icon:'el-icon-location',
          children:[
            {
              index:'/page3',
              childtitle:'導(dǎo)航2page3'
            },
            {
              index:'/page4',
              childtitle:'導(dǎo)航2page4'
            },
          ]
        }
      ]
    }
  },
  
}
</script>
<style scoped>
.slider{
  height: 100vh;
}
</style>

home頁

<template>
  <div class="home">
    <el-row>
      <el-col :span="4">
        <!-- 左側(cè)導(dǎo)航欄 -->
        <slider></slider>
      </el-col>
      <el-col :span='20'>
        <!-- header -->
        <nav-top></nav-top>
        <!-- 內(nèi)容區(qū) -->
        <div class="app-wrap">
           <!-- 此處放置el-tabs代碼 -->
            <div >
              <el-tabs
                v-model="activeIndex"
                type="border-card"
                closable
                v-if="openTab.length"
                 @tab-click='tabClick'
                  @tab-remove='tabRemove'
                >
                <el-tab-pane
                  :key="item.name"
                  v-for="(item, index) in openTab"
                  :label="item.name"
                  :name="item.route"
                 >
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="content-wrap">
              <router-view/>
            </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

通過路由配置,使頁面可以正常的跳轉(zhuǎn)

準(zhǔn)備狀態(tài)管理

state: {
    openTab:[],//所有打開的路由
    activeIndex:'/main' //激活狀態(tài)
  },
  mutations: {
    // 添加tabs
    add_tabs (state, data) {
      this.state.openTab.push(data);
    },
    // 刪除tabs
    delete_tabs (state, route) {
      let index = 0;
      for (let option of state.openTab) {
        if (option.route === route) {
          break;
        }
        index++;
      }
      this.state.openTab.splice(index, 1);
    },
    // 設(shè)置當(dāng)前激活的tab
    set_active_index (state, index) {
      this.state.activeIndex = index;
    },
  },

在home頁，或者silder頁，初始的路由狀態(tài)

mounted () {
    // 刷新時以當(dāng)前路由做為tab加入tabs
    // 當(dāng)前路由不是首頁時，添加首頁以及另一頁到store里，并設(shè)置激活狀態(tài)
    // 當(dāng)當(dāng)前路由是首頁時，添加首頁到store，并設(shè)置激活狀態(tài)
   if (this.$route.path !== '/' && this.$route.path !== '/main') {
      console.log('1');
      this.$store.commit('add_tabs', {route: '/main' , name: 'main'});
      this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
      this.$store.commit('set_active_index', this.$route.path);
    } else {
      console.log('2');
      this.$store.commit('add_tabs', {route: '/main', name: 'main'});
      this.$store.commit('set_active_index', '/main');
      this.$router.push('/');
    }
  },

注意這里如果你刷新只想保留首頁，那么 mounted 中，你只需寫else中的代碼。
如果刷新想，保留首頁和當(dāng)前路由頁，if else都要寫（）

監(jiān)聽路由變化

 watch:{
    '$route'(to,from){
        //判斷路由是否已經(jīng)打開
        //已經(jīng)打開的 ，將其置為active
        //未打開的，將其放入隊(duì)列里
        let flag = false;
        for(let item of this.openTab){
          console.log("item.name",item.name)
          console.log("t0.name",to.name)

          if(item.name === to.name){
            console.log('to.path',to.path);
            this.$store.commit('set_active_index',to.path)
            flag = true;
            break;
          }
        }

        if(!flag){
          console.log('to.path',to.path);
          this.$store.commit('add_tabs', {route: to.path, name: to.name});
          this.$store.commit('set_active_index', to.path);
        }

    }
  }

tab方法

//tab標(biāo)簽點(diǎn)擊時，切換相應(yīng)的路由
    tabClick(tab){
      console.log("tab",tab);
      console.log('active',this.activeIndex);
      this.$router.push({path: this.activeIndex});
    },
    //移除tab標(biāo)簽
    tabRemove(targetName){
      console.log("tabRemove",targetName);
      //首頁不刪
      if(targetName == '/'){
        return
      }
      this.$store.commit('delete_tabs', targetName);
      if (this.activeIndex === targetName) {
        // 設(shè)置當(dāng)前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          console.log('=============',this.openTab[this.openTab.length-1].route)
          this.$store.commit('set_active_index', this.openTab[this.openTab.length-1].route);
          this.$router.push({path: this.activeIndex});
        } else {
          this.$router.push({path: '/'});
        }
      }
    }

GitHub代碼地址
 在線演示地址

登錄與退出登錄

做登錄與退出時，需要清空路由

退出登錄方法 或者 登錄成功方法 調(diào)用

this.$store.state.openTab = [];
this.$store.state.activeIndex = '/main';

到此這篇關(guān)于element tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)element tab標(biāo)簽管理路由頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: