vue2.0如何实现选项卡导航效果

小编给大家分享一下Vue2.0如何实现选项卡导航效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体内容如下

背景是一个WEB端的电商网站，根据点击的导航选项卡呈现不同得种类商品，首先这里说下我的路由结构是导航是一个组件，选项卡的内容又是单独的一个组件。

这是导航组件的内容，这里主要通过v-for循环生成导航，没什么好说的，需要注意的是，这因为选项卡需要知道用户所点击的是哪个模块，所以在数据中有个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>

这里用到的知识点

v-for循环实现导航的生成

在函数中如何得到当前点击元素的某个属性值

这里给每个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 = [];//声明一个空数组，用来存放当前点击元素的所有的兄弟元素，用来实现只给当前点击的元素动态加背景色            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循环是实现给当前元素的兄弟元素去除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:'短袖职业套装',                      id:'M3',                  price:'135',              },              {                  img:'m4.jpg',                      name:'黑色职业套装',                      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:'短袖职业套装',                      id:'W3',                  price:'135',              },              {                  img:'clothes4.jpg',                      name:'黑色职业套装',                      id:'W4',                  price:'288',              },              {                  img:'clothes5.jpg',                  name:'格子衬衫',                      id:'W5',                  price:'155',              },              {                  img:'clothes6.jpg',                  name:'女性性感短裙',                      id:'W6',                  price:'300',              }              ];          }else if(this.type=="性感职业装"){                  this.data=[              {                  img:'clothes1.jpg',                  name:'黑白条纹裙',                  id:'W1',                  price:'100',              },              {                  img:'clothes2.jpg',                  name:'水蓝色斑点无袖连衣裙',                      id:'W2',                  price:'199',              },              {                  img:'clothes3.jpg',                  name:'短袖职业套装',                      id:'W3',                  price:'135',              },              {                  img:'clothes4.jpg',                      name:'黑色职业套装',                      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:'黑色职业套装',                      id:'M4',                  price:'288',              },              {                  img:'m5.jpg',                  name:'格子衬衫',                      id:'M5',                  price:'155',              },              {                  img:'clothes4.jpg',                      name:'黑色职业套装',                      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>

当时就是这里，给我带来了一些困扰，一开始我是把获取数据的changeData方法写在了mounted钩子函数中，但是这样的后果是只有在首次路由跳转的时候才会起作用，再次点击导航的时候数据不会改变

why？因为mounted是创建组件页面元素挂载以后会走里面的方法~想一下，你再次点击的时候只会路由跳转，并不会重新创建组件，所以~

我在想怎么能每次点击导航路由跳转以后都重新走一次获取数据的changeData方法，我想了想，因为导航点击每次都会进行路由跳转，所以~我可以在watch里监听路由跳转，这样每次点击导航的时候都会触发监听方法，从而会调用changeData方法~~解决了不是~~上面的代码有具体的写法

最后说下如何监听路由

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

以上是“vue2.0如何实现选项卡导航效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！