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

// list 頁

<template>
? ? <div>
? ? ? ? <div v-show="selTab == 0"> 標簽為0時顯示的內(nèi)容 </div>
? ? ? ? <div v-show="selTab == 1"> 標簽為1時顯示的內(nèi)容 </div>
? ? ? ? <div v-show="selTab == 2"> 標簽為2時顯示的內(nèi)容 </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實現(xiàn)tab頁面的跳轉

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

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

思路與jQuery類似，即點擊對應的Tab項時，使對應的class有效。因此，

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

(2) 要綁定點擊事件及對應的函數(shù)，如，@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標簽對應的展示的內(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ù)據(jù)以及函數(shù)

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

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

您可能感興趣的文章: