博客

不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件


在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-color="#20a0ff" unique-opened router @select="addTab">

		<!-- 一级菜单 -->
			<template v-for="item in slidebarData" >
				<el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
					<template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>

					<!-- 二级菜单 -->
					<template v-for="itemChild in item.subs">
						<el-submenu v-if="itemChild.subs && itemChild.subs.length" :index="itemChild.index" :key="itemChild.index" class="erji">
							<template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.title}}</span></template>

							<!-- 三级菜单 -->
							<el-menu-item v-for="itemChild_Child in itemChild.subs" :index="itemChild_Child.index" :key="itemChild_Child.index">
								<i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.title}}</span>
							</el-menu-item>
						</el-submenu>

						<el-menu-item v-else :index="itemChild.index" :key="itemChild.index"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.title}}</span></el-menu-item>
					</template>
				</el-submenu>

				<el-menu-item v-else :index="item.index" :key="item.index"><i :class="item.icon"></i><span slot="title">{{item.title}}</span></el-menu-item>
			</template>

		</el-menu>

使用bus把路由信息传出

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

在tabs.vue中接收

<template>
	<div id="tabs">
		<el-tabs type="card" v-model="tabsVal" @tab-remove="closeTab" @tab-click="tabclick">
			<el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.title" :closable="item.closable" >
                <component :is="item.component"></component>
            </el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import searchFor from '../page/ContentManagement/Class/searchFor.vue';
	import bus from '../common/bus';
	export default {
		data() {
			return {
				inputVisible: false,
				navPath: '',
				tabsVal: "searchFor",
				tabList: [
					{
			            title: '热门搜索',
			            name: 'searchFor',
			            disabled: true,
			            closable: false,
			            component: searchFor
			        }
				]
			}
		},
		methods: {
			closeTab(tag) {//关闭tabs
				var tabListName = []
				for(let i = 0; i < this.tabList.length; i++){
					tabListName[i] = this.tabList[i].name;
				}
				console.log(tabListName)
				this.tabList.splice(tabListName.indexOf(tag), 1);
				this.tabsVal = "searchFor";
				this.$router.push("searchFor");
			},
			tabclick(val) {
				console.log(val)
				this.$router.push(val.name);
				//点击tabs触发路由跳转，到相应路由
			}
		},
		mounted () {
        		bus.$on('navPath',(name,val) =>{//处理传过来的值
        			console.log(name)
		            var titname;
		            if(name[name.length -1] == 'searchFor'){
		            		titname = '热门搜索'
		            }else if(name[name.length -1] == 'Courier1'){
		            		titname = '套课列表'
		            }else if(name[name.length -1] == 'Courier2'){
		            		titname = '小节列表'
		            }else if(name[name.length -1] == 'Courier3'){
		            		titname = '套课分享'
		            }
		            if (this.tabList.filter(f => f.name == name[name.length -1]) == 0) {
		            		var component = resolve => require([`../page/ContentManagement/${name[0]}/${name[name.length -1]}`], resolve)//合伙人管理
			            this.tabList.push({
		                		title: titname,
			                name: name[name.length -1],
			                disabled: false,
			                closable: true,
			                component: component
			            })
		            }
		            this.tabsVal = name[name.length -1]
		        });
	    		}
	}
</script>

<style scoped>
	#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;
		padding-left: 10px;
	}
	
	.el-tag {
		margin: 3px;
	}
	
</style>