这篇文章主要为大家详细介绍了vue elementUI使用tabs与导航栏联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件
在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去
<!-- 一级菜单 --> <i></i><span>{{item.title}}</span><!-- 二级菜单 --> <i></i><span>{{itemChild.title}}</span><!-- 三级菜单 --> <i></i><span>{{itemChild_Child.title}}</span><i></i><span>{{itemChild.title}}</span><i></i><span>{{item.title}}</span>
使用bus把路由信息传出
import bus from '../common/bus'; methods: { addTab(key,keyPath) { console.log(key,keyPath) bus.$emit('navPath',keyPath) } },
在tabs.vue中接收
<div id="tabs"> </div> #tabs { position: fixed; right: calc(2vw - 2px); top: 100px; z-index: 5; width: calc(96% - 189px); height: 38px; background: #f0f0f0; border-bottom: 4px solid #ccc; border-top: 4px solid #ccc; <i style="color:transparent">本文来源gaodai$ma#com搞$代*码6网</i>padding-left: 10px; } .el-tag { margin: 3px; }
以上就是vue elementUI使用tabs与导航栏联动的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue elementUI使用tabs与导航栏联动
转载请注明原文链接：vue elementUI使用tabs与导航栏联动
