vue-router + el-menu动态渲染二级菜单

在项目需求，需要动态渲染二级菜单：

因为已经看了产品原型只有二级菜单所以也不考虑兼容三级菜单了，主要是懒，还有就是不会。还请多多指教

<template v-for="(item,index) in menuItems">
				<el-submenu :index="item.path" :key="index" v-if="item.children&&item.children.length>0">
					<template slot="title">{{item.title}}</template>
					<el-menu-item v-for="menu in item.children" :key="menu.path" :index="menu.path">{{menu.title}}</el-menu-item>
				</el-submenu>
				<el-menu-item :index="item.path" :key="index" v-else>{{item.title}}</el-menu-item>
			</template>

 数据结构我想不用说也能知道！这里主要是要注意几点：

1.template标签上使用v-for的时候外层最好包上一层div或者其他标签，不然会报错

2.vue2中template标签上不能放：key属性，要放在template的子节点上，vue3是可以放在template标签上的