vue2.0如何實現選項卡導航效果

小編給大家分享一下vue2.0如何實現選項卡導航效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體內容如下

1：背景是一個web端的電商網站，根據點擊的導航選項卡呈現不同得種類商品，首先這里說下我的路由結構是導航是一個組件，選項卡的內容又是單獨的一個組件。

這是導航組件的內容，這里主要通過v-for循環(huán)生成導航，沒什么好說的，需要注意的是，這因為選項卡需要知道用戶所點擊的是哪個模塊，所以在數據中有個typeId屬性，這里需要把該屬性值傳給選項卡組件。

<template>
     <ul class="nav">
         <li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className">
             {{nav.title}}
         </li>
     </ul>
  </header>
</template>
<script>
export default {
  data(){
      return{
          navs:[
              {
                  title:"Home",
                  path:'/home/second',
                  typeId:'1',
                  className:'currLi'
              },
              {
                  title:"男裝",
                  path:'/home/second',
                  typeId:'2'
              },
              {
                  title:"女裝",
                  path:'/home/second',
                  typeId:'3'
              },
              {
                  title:"童裝",
                  path:'/home/second',
                  typeId:'4'
              }
          ]
      }
  },methods:{
      seeClothes(event){
          var el=event.currentTarget;
          var type=el.getAttribute("id");
            var a = [];
            var p = el.parentNode.children;
            for(var i =0,pl= p.length;i<pl;i++) {
                p[i].classList.remove("currLi");
            }
          event.currentTarget.classList.add("currLi");
          this.$router.push({path:'/home/clothesType',query:{type:type}})
      }
  }
}
</script>

這里用到的知識點

1：v-for循環(huán)實現導航的生成

2：在函數中如何得到當前點擊元素的某個屬性值

這里給每個li綁定了點擊事件，該元素綁定的id值是我們所需要傳給選項卡組件的，所以我們在綁定事件的時候需要在click函數中添加參數，注意看我這里綁定事件的時候是這樣寫的

<li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className">
             {{nav.title}}
         </li>

點擊事件是這樣寫的

seeClothes(event){
          var el=event.currentTarget;//這樣是獲取當前點擊的元素
          var type=el.getAttribute("id");//這樣就可以獲取當前元素的id屬性值
            var a = [];//聲明一個空數組，用來存放當前點擊元素的所有的兄弟元素，用來實現只給當前點擊的元素動態(tài)加背景色
            var p = el.parentNode.children;
            for(var i =0,pl= p.length;i<pl;i++) {
                p[i].classList.remove("currLi");
            }
          event.currentTarget.classList.add("currLi");//for循環(huán)是實現給當前元素的兄弟元素去除currLi類，實現只有當前點擊元素有背景色
          this.$router.push({path:'/home/clothesType',query:{type:type}})//點擊導航路由跳轉，并且通過query對象將type參數傳過去
      }

現在參數傳過去了，我們看下選項卡組件是怎么寫的

<template>
  <div>
      <div class="typeBox">
          <ul class="closeType">
              <li v-for="item in data" >
                  <div class="npBox">
                      <img :src="'../static/img/'+item.img" class="cDetail">
                      <div class="npInnerBox">
                          <p class="name" >{{item.name}}</p>
                          <p class="price">{{item.price}}</p>
                          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                          <button class="addCart" @click="addCart($event)">加入購物車</button>
                          <span v-bind:id="item.id" ></span>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
  </div>
</template>
<script>
export default {
  data(){
      return{
          type:'',
          data:'',
          num1: 1,
          userCart:[],
          currentPage4:'',
          pageSize:'',
          total:''
      }
  },
  methods:{
     changeData(){
             this.type=this.$route.query.type;
                 if(this.type=="2"){
              this.data=[
              {
                  img:'m1.jpg',
                  name:'黑白條紋裙',
                  id:'M1',
                  price:'100',
              },
              {
                  img:'m2.jpg',
                  name:'水藍色斑點無袖連衣裙',
                      id:'M2',
                  price:'199',
              },
              {
                  img:'m3.jpg',
                  name:'短袖職業(yè)套裝',
                      id:'M3',
                  price:'135',
              },
              {
                  img:'m4.jpg',    
                  name:'黑色職業(yè)套裝',
                      id:'M4',
                  price:'288',
              },
              {
                  img:'m5.jpg',
                  name:'格子襯衫',
                      id:'M5',
                  price:'155',
              },
              {
                  img:'m6.jpg',
                  name:'女性性感短裙',
                      id:'M6',
                  price:'300',
              }
              ];
          }else if(this.type=="3"){
                  this.data=[
              {
                  img:'clothes1.jpg',
                  name:'黑白條紋裙',
                  id:'W1',
                  price:'100',
              },
              {
                  img:'clothes2.jpg',
                  name:'水藍色斑點無袖連衣裙',
                      id:'W2',
                  price:'199',
              },
              {
                  img:'clothes3.jpg',
                  name:'短袖職業(yè)套裝',
                      id:'W3',
                  price:'135',
              },
              {
                  img:'clothes4.jpg',    
                  name:'黑色職業(yè)套裝',
                      id:'W4',
                  price:'288',
              },
              {
                  img:'clothes5.jpg',
                  name:'格子襯衫',
                      id:'W5',
                  price:'155',
              },
              {
                  img:'clothes6.jpg',
                  name:'女性性感短裙',
                      id:'W6',
                  price:'300',
              }
              ];
          }else if(this.type=="性感職業(yè)裝"){
                  this.data=[
              {
                  img:'clothes1.jpg',
                  name:'黑白條紋裙',
                  id:'W1',
                  price:'100',
              },
              {
                  img:'clothes2.jpg',
                  name:'水藍色斑點無袖連衣裙',
                      id:'W2',
                  price:'199',
              },
              {
                  img:'clothes3.jpg',
                  name:'短袖職業(yè)套裝',
                      id:'W3',
                  price:'135',
              },
              {
                  img:'clothes4.jpg',    
                  name:'黑色職業(yè)套裝',
                      id:'W4',
                  price:'288',
              },
              {
                  img:'clothes5.jpg',
                  name:'格子襯衫',
                      id:'W5',
                  price:'155',
              },
              {
                  img:'clothes6.jpg',
                  name:'女性性感短裙',
                      id:'W6',
                  price:'300',
              }
              ];
          }else if(this.type==1){
                  this.data=[
              {
                  img:'m3.jpg',
                  name:'黑白條紋裙',
                  id:'M1',
                  price:'100',
              },
              {
                  img:'m4.jpg',    
                  name:'黑色職業(yè)套裝',
                      id:'M4',
                  price:'288',
              },
              {
                  img:'m5.jpg',
                  name:'格子襯衫',
                      id:'M5',
                  price:'155',
              },
              {
                  img:'clothes4.jpg',    
                  name:'黑色職業(yè)套裝',
                      id:'W4',
                  price:'288',
              },
              {
                  img:'clothes5.jpg',
                  name:'格子襯衫',
                      id:'W5',
                  price:'155',
              },
              {
                  img:'clothes6.jpg',
                  name:'女性性感短裙',
                      id:'W6',
                  price:'300',
              }
              ];
          }
    }
  },
   created(){
         this.changeData()
  },
  watch:{
       "$route": "changeData"
  }
  
}
</script>

當時就是這里，給我?guī)砹艘恍├_，一開始我是把獲取數據的changeData方法寫在了mounted鉤子函數中，但是這樣的后果是只有在首次路由跳轉的時候才會起作用，再次點擊導航的時候數據不會改變

why？因為mounted是創(chuàng)建組件頁面元素掛載以后會走里面的方法~想一下，你再次點擊的時候只會路由跳轉，并不會重新創(chuàng)建組件，所以~

我在想怎么能每次點擊導航路由跳轉以后都重新走一次獲取數據的changeData方法，我想了想，因為導航點擊每次都會進行路由跳轉，所以~我可以在watch里監(jiān)聽路由跳轉，這樣每次點擊導航的時候都會觸發(fā)監(jiān)聽方法，從而會調用changeData方法~~解決了不是~~上面的代碼有具體的寫法

最后說下如何監(jiān)聽路由

watch:{
  "$route": "changeData"
}

以上是“vue2.0如何實現選項卡導航效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！