vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁

更新時(shí)間：2022年05月31日 10:05:49 作者：婷嘰

這篇文章主要介紹了vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

兄弟組件之間如何跳轉(zhuǎn)指定tab標(biāo)簽頁

場(chǎng)景

index跳轉(zhuǎn)至list的第三個(gè)標(biāo)簽欄并刷新列表

// index

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

// list 頁

<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頁面的跳轉(zhuǎn)

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

那么，如果我們選擇使用vue.js，該如何實(shí)現(xiàn)Tab頁的跳轉(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: