vue實現兄弟組件之間跳轉指定tab標簽頁
兄弟組件之間如何跳轉指定tab標簽頁
場景
index跳轉至list的第三個標簽欄並刷新列表
// index
methods: {
...
go(){
this.$router.push({
name: 'list', //要跳轉的路由name
query: {
myTab: 2
}
})
},
}
// list 頁
<template> <div> <div v-show="selTab == 0"> 標簽為0時顯示的內容 </div> <div v-show="selTab == 1"> 標簽為1時顯示的內容 </div> <div v-show="selTab == 2"> 標簽為2時顯示的內容 </div> </div> </template>
<script>
export default {
data() {
return {
selTab: 0,
}
}
mounted() {
//...
let myTab = this.$route.query.myTab;
this.selTab = myTab;
this.getList(); //你自己的 當標簽為2時的獲取列表的方法
}
}
</script>
vue.js實現tab頁面的跳轉
在jQuery中，若想實現Tab頁面的跳轉，隻需要將相應的class名，一般為active，加到對應的dom元素上，使其顯示即可。
那麼，如果我們選擇使用vue.js，該如何實現Tab頁的跳轉呢？
思路與jQuery類似，即點擊對應的Tab項時，使對應的class有效。因此，
(1) 要具備動態的class,如，:class="{active:index==x}"
(2) 要綁定點擊事件及對應的函數，如，@click=activateTab(x)
(3) 當然你使用瞭變量index,自然要在vue實例中聲明此變量。
tab標簽
<ul class="tab-header clear-float-ml">
<li class="name" @click="activateTab(0)" :class="{active:index==0}">New</li>
<li class="name" @click="activateTab(1)" :class="{active:index==1}">Existed&Copy</li>
</ul>
tab標簽對應的展示的內容
<form class="tab-content new-tab" :class="{active:index==0}">
</form>
<div class="tab-content existed-tab active" :class="{active:index==1}">
</div>
vue實例中對應的數據以及函數
<!-- vue 實例-->
var vm=new Vue({
el:'#management',
data:{
index:0
},
methods:{
activateTab:function(index_chosen){
this.index=index_chosen;
}
}
})
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。