vue组件之间的跳转方法,vue tab切换组件
本文主要介绍vue在兄弟组件之间跳转指定tab页的实现，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
如何在兄弟组件之间跳转指定了标签页scene vue.js实现了标签页跳转tab tab tab对应显示的内容，对应的数据和vue实例中的函数。
兄弟组件之间如何跳转指定tab标签页
场景
Index跳转到列表的第三个选项卡并刷新列表。
// index
方法：{
.
go(){
这个。$router.push({
Name: list ，//要跳转的路由的名称
查询：{
我的标签:2
}
})
},
}
// list 页
模板
差异
Div-show= seltab==0 标签为0 /div时显示什么
当标签为1 /div时显示什么
当标签为2 /div时，显示什么
/div
/模板
脚本
导出默认值{
data() {
返回{
selTab: 0，
}
}
已安装(){
//.
让我的Tab=这个。$ route . query . mytab；
this.selTab=myTab
this . getlist()；//当标签为2时，您自己获取列表的方法
}
}
/脚本
vue.js实现tab页面的跳转
在jQuery中，如果要跳转标签页，只需要在相应的dom元素中添加相应的类名，一般是active，就可以显示出来。
那么，如果我们选择使用vue.js，该如何实现Tab页的跳转呢？
这个想法类似于jQuery，即当相应的选项卡项被点击时，相应的类被激活。因此，
(1)有一个动态类，如：class={active:index==x}
(2)绑定点击事件及其对应的函数，例如，@click=activateTab(x)
(3)当然，你用了可变指数。当然，您应该在vue实例中声明这个变量。
tab标签
ul class= tab-header clear-float-ml
Li class= name @ click= activate tab(0):class= { active:index==0 } 新建/li
Li class= name @ click= activate tab(1):class= { active:index==1 } existed copy/Li
/ul
tab标签对应的展示的内容
form class= tab-content new-tab :class= { active:index==0 }
/表单
div class= tab-content existed-tab active :class= { active:index==1 }
/div
vue实例中对应的数据以及函数
！vue的实例-
var vm=new Vue({
埃尔： #管理，
数据：{
索引：0
},
方法：{
activate tab:function(index _ choosed){
this . index=index _ choosed；
}
}
})
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。