vue2.0 實現選項卡導航例項
阿新 • • 發佈：2019-02-05
1：背景是一個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>
這裡用到的知識點
1：v-for迴圈實現導航的生成
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 = [];//宣告一個空陣列，用來存放當前點選元素的所有的兄弟元素，用來實現只給當前點選的元素動態加背景色 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" style="margin-bottom: 24px;"> <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" style="display: none;"></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"
}下篇文章說下watch的具體用法~