Vue模仿饿了么封装侧边导航菜单

新建文件夹components，再建一个children文件夹,包含以下.vue文件
children文件夹下的hl-Menu.vue，hl-Menu-item.vue，hl-subMenu.vue，reSub.vue

//hl-Menu.vue
<template>
		<ul>
			<slot></slot>
		</ul>
</template>

<script>
	export default{
   
		name:'hlMenu',
		
	}
</script>

<style lang="scss" scoped>
	ul{
   
		line-height: 55px;
    font-size: 16px;
    height: auto;
		margin-top: 25px;
		cursor: pointer;
	}
</style>
//hl-Menu-item.vue
<template>
		<router-link tag="li" :active-class="`${activeName}`" :to="`${path}`">
			<i :class="`${url}`"></i>
			<slot></slot>
		</router-link>
</template>

<script>
	export default{
   
		name:'hlMenuItem',
		props:{
   
			url:{
   
				type:String,
				default:'',
			},
			activeName:{
   
				type:String,
				default:'',
			},
			path:{
   
				type:String,
				default:'',
			}
		}
	}
</script>

<style lang="scss" scoped>
	li{
   
		height: 55px;
		padding-left: 30px;
		color: #ddd;
	}
	li.active{
   
		border-left: