vue 实现动态渲染菜单

在很多情况下我们的菜单是写死的,然后通过路由路径跳转到所对应的页面，类似于这样的。

下面是普通的一级菜单和二级菜单的写法：

//一级菜单
<el-menu-item index="1" route="/evaluateStudents"
  data-intro="【首页】 >&nbsp;&nbsp;首页</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>