在很多情况下我们的菜单是写死的,然后通过路由路径跳转到所对应的页面,类似于这样的。
下面是普通的一级菜单和二级菜单的写法:
//一级菜单
<el-menu-item index="1" route="/evaluateStudents"
data-intro="【首页】 > 首页</el-menu-item
>
//二级菜单
<el-sub-menu index="2" data-intro="【发布通知】" data-step="3">
<template v-slot:title>发布通知</template>
<el-menu-item index="2-1" route="/Notice">通知</el-menu-item>
<el-menu-item index="2-2" route="/Survey">问卷</el-menu-item>
<el-menu-item index="2-3" route="/HisNotice">历史通知</el-menu-item
>
</el-sub-menu>
现在新的需求是,一级菜单和二级菜单都需要动态生成,根据后台给的数据生成动态菜单。
接口格式数据:
实现代码:
:index可以读取url里面的路由来实现跳转。
二级菜单可以通过v-if判断里面是否有数据来决定是否显示。
里面的对应菜单数据就需要前端去判断获取了。
//动态一级菜单
<template v-for="(menus, index) in menulist" :key="index">
<el-menu-item :index="menus.url">{{ menus.detail }}</el-menu-item>
</template>
//动态二级菜单
<el-sub-menu v-if="noticeshow" index="1" data-intro="【发布通知】" data-step="3">
<template v-slot:title>发布通知</template>
<template v-for="(menus, index) in noticelist" :key="index" >
<el-menu-item :index="menus.url">{{ menus.detail }}</el-menu-item>
</template>
</el-sub-menu>
此外还有一种特殊情况,原本使用a链接去跳转的菜单,并不是使用路由跳转。
<el-menu-item route="/evaluateStudents">
<a target="_blank" class="cardUrl" :href="www.baidu.com" data-step="11">电子班牌</a>
</el-menu-item>
这种情况我们要做动态菜单,我们只要获取数据里的detail,也就是获取菜单的名字,并不需要url(可以为空),因为我们已经有链接跳转。
<template v-for="(menus, index) in electronicclasslist" :key="index">
<el-menu-item :index="menus.url"><a target="_blank" class="cardUrl" :href="www.baidu.com" data-step="11">
{{ menus.detail }}</a>
</el-menu-item>
</template>