vue实现兄弟组件之间跳转指定tab标签页

目录

• 兄弟组件之间如何跳转指定tab标签页
• 场景
• vue.js实现tab页面的跳转    
• tab标签
• tab标签对应的展示的内容
• vue实例中对应的数据以及函数

兄弟组件之间如何跳转指定tab标签页

场景

index跳转至list的第三个标签栏并刷新列表

// index 

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

// list 页  

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标签

            
New
            
Existed&Copy
  

tab标签对应的展示的内容

vue实例中对应的数据以及函数

    var vm=new Vue({
      el:'#management',
      data:{
        index:0
      },
      methods:{
        activateTab:function(index_chosen){
          this.index=index_chosen;
        }
      } 
    })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。