好资源导航 » 文章资讯 » vue elementUI使用tabs与导航栏联动

vue elementUI使用tabs与导航栏联动

2023-08-21 05:49:04 57

不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件
在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去






{{item.title}}




{{itemChild.title}}



{{itemChild_Child.title}}



{{itemChild.title}}



{{item.title}}

使用bus把路由信息传出

importbusfrom'../common/bus';
methods:{
addTab(key,keyPath){
console.log(key,keyPath)
bus.$emit('navPath',keyPath)
}
},

在tabs.vue中接收






#tabs{
position:fixed;
right:calc(2vw-2px);
top:100px;
z-index:5;
width:calc(96%-189px);
height:38px;
background:#f0f0f0;
border-bottom:4pxsolid#ccc;
border-top:4pxsolid#ccc;
padding-left:10px;
}

.el-tag{
margin:3px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue elementUI使用tabs与导航栏联动

热门推荐

随机推荐