這篇文章主要介紹了vue中elementUI如何使用tabs與導(dǎo)航欄聯(lián)動，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

做網(wǎng)站、網(wǎng)站建設(shè)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給成都創(chuàng)新互聯(lián)一個(gè)展示的機(jī)會來證明自己，這并不會花費(fèi)您太多時(shí)間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗(yàn)，一切以用戶為中心。

不使用tabs標(biāo)簽頁時(shí)，點(diǎn)擊導(dǎo)航菜單，router-view映射相應(yīng)的組件即可顯示頁面。但我們想在點(diǎn)擊導(dǎo)航欄時(shí)在tabs中映射相應(yīng)的組件，這就需要使用tabs組件
在slider.vue中點(diǎn)擊路由后，把當(dāng)前選擇的路由@select使用bus傳出去

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-color="#20a0ff" unique-opened router @select="addTab">

 <!-- 一級菜單 -->
  <template v-for="item in slidebarData" >
  <el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
   <template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>

   <!-- 二級菜單 -->
   <template v-for="itemChild in item.subs">
   <el-submenu v-if="itemChild.subs && itemChild.subs.length" :index="itemChild.index" :key="itemChild.index" class="erji">
    <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.title}}</span></template>

    <!-- 三級菜單 -->
    <el-menu-item v-for="itemChild_Child in itemChild.subs" :index="itemChild_Child.index" :key="itemChild_Child.index">
    <i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.title}}</span>
    </el-menu-item>
   </el-submenu>

   <el-menu-item v-else :index="itemChild.index" :key="itemChild.index"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.title}}</span></el-menu-item>
   </template>
  </el-submenu>

  <el-menu-item v-else :index="item.index" :key="item.index"><i :class="item.icon"></i><span slot="title">{{item.title}}</span></el-menu-item>
  </template>

 </el-menu>

使用bus把路由信息傳出

import bus from '../common/bus';
methods: {
 addTab(key,keyPath) {
 console.log(key,keyPath)
 bus.$emit('navPath',keyPath)
 }
},

在tabs.vue中接收

<template>
 <div id="tabs">
 <el-tabs type="card" v-model="tabsVal" @tab-remove="closeTab" @tab-click="tabclick">
  <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.title" :closable="item.closable" >
        <component :is="item.component"></component>
      </el-tab-pane>
 </el-tabs>
 </div>
</template>

<script>
 import searchFor from '../page/ContentManagement/Class/searchFor.vue';
 import bus from '../common/bus';
 export default {
 data() {
  return {
  inputVisible: false,
  navPath: '',
  tabsVal: "searchFor",
  tabList: [
   {
        title: '熱門搜索',
        name: 'searchFor',
        disabled: true,
        closable: false,
        component: searchFor
      }
  ]
  }
 },
 methods: {
  closeTab(tag) {//關(guān)閉tabs
  var tabListName = []
  for(let i = 0; i < this.tabList.length; i++){
   tabListName[i] = this.tabList[i].name;
  }
  console.log(tabListName)
  this.tabList.splice(tabListName.indexOf(tag), 1);
  this.tabsVal = "searchFor";
  this.$router.push("searchFor");
  },
  tabclick(val) {
  console.log(val)
  this.$router.push(val.name);
  //點(diǎn)擊tabs觸發(fā)路由跳轉(zhuǎn)，到相應(yīng)路由
  }
 },
 mounted () {
     bus.$on('navPath',(name,val) =>{//處理傳過來的值
      console.log(name)
       var titname;
       if(name[name.length -1] == 'searchFor'){
        titname = '熱門搜索'
       }else if(name[name.length -1] == 'Courier1'){
        titname = '套課列表'
       }else if(name[name.length -1] == 'Courier2'){
        titname = '小節(jié)列表'
       }else if(name[name.length -1] == 'Courier3'){
        titname = '套課分享'
       }
       if (this.tabList.filter(f => f.name == name[name.length -1]) == 0) {
        var component = resolve => require([`../page/ContentManagement/${name[0]}/${name[name.length -1]}`], resolve)//合伙人管理
        this.tabList.push({
          title: titname,
          name: name[name.length -1],
          disabled: false,
          closable: true,
          component: component
        })
       }
       this.tabsVal = name[name.length -1]
     });
    }
 }
</script>

<style scoped>
 #tabs {
 position: fixed;
 right: calc(2vw - 2px);
 top: 100px;
 z-index: 5;
 width: calc(96% - 189px);
 height: 38px;
 background: #f0f0f0;
 border-bottom: 4px solid #ccc;
 border-top: 4px solid #ccc;
 padding-left: 10px;
 }
 
 .el-tag {
 margin: 3px;
 }
 
</style>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中elementUI如何使用tabs與導(dǎo)航欄聯(lián)動”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標(biāo)題：vue中elementUI如何使用tabs與導(dǎo)航欄聯(lián)動-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://jinyejixie.com/article16/djsogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、微信小程序、定制網(wǎng)站、營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)