methods: {?
? ? ...?
? ? go(){
? ? ? this.$router.push({
? ? ? ? name: 'list', ? ? ? ?//要跳轉(zhuǎn)的路由name
? ? ? ? query: {
? ? ? ? ? myTab: 2
? ? ? ? }
? ? ? })
? ? },
}

// list 頁(yè)

<template>
? ? <div>
? ? ? ? <div v-show="selTab == 0"> 標(biāo)簽為0時(shí)顯示的內(nèi)容 </div>
? ? ? ? <div v-show="selTab == 1"> 標(biāo)簽為1時(shí)顯示的內(nèi)容 </div>
? ? ? ? <div v-show="selTab == 2"> 標(biāo)簽為2時(shí)顯示的內(nèi)容 </div>
? ? </div>
</template>

<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? selTab: 0,
? ? ? ? }
? ? }
?
? ? mounted() {
? ? ? ? //...
? ? ? ? let myTab = this.$route.query.myTab;
? ? ? ? this.selTab = myTab;
? ? ? ? this.getList(); ? ?//你自己的 當(dāng)標(biāo)簽為2時(shí)的獲取列表的方法
? ? }
}?
</script>

vue.js實(shí)現(xiàn)tab頁(yè)面的跳轉(zhuǎn)

在jQuery中，若想實(shí)現(xiàn)Tab頁(yè)面的跳轉(zhuǎn)，只需要將相應(yīng)的class名，一般為active，加到對(duì)應(yīng)的dom元素上，使其顯示即可。

那么，如果我們選擇使用vue.js，該如何實(shí)現(xiàn)Tab頁(yè)的跳轉(zhuǎn)呢？

思路與jQuery類似，即點(diǎn)擊對(duì)應(yīng)的Tab項(xiàng)時(shí)，使對(duì)應(yīng)的class有效。因此，

(1) 要具備動(dòng)態(tài)的class,如，:class="{active:index==x}"

(2) 要綁定點(diǎn)擊事件及對(duì)應(yīng)的函數(shù)，如，@click=activateTab(x)

(3) 當(dāng)然你使用了變量index,自然要在vue實(shí)例中聲明此變量。

tab標(biāo)簽

<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標(biāo)簽對(duì)應(yīng)的展示的內(nèi)容

<form class="tab-content new-tab" :class="{active:index==0}">
? ? ? ? ?
?</form>
?<div class="tab-content existed-tab active" :class="{active:index==1}">
? ? ? ? ? ?
?</div>

vue實(shí)例中對(duì)應(yīng)的數(shù)據(jù)以及函數(shù)

<!-- vue 實(shí)例-->
? ? var vm=new Vue({
? ? ? el:'#management',
? ? ? data:{
? ? ? ? index:0
? ? ? },
? ? ? methods:{
? ? ? ? activateTab:function(index_chosen){
? ? ? ? ? this.index=index_chosen;
? ? ? ? }
? ? ? }?
? ? })

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: