Spring Boot Vue Element入门实战（十六）菜单首页，前后台整合

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/u013254183/article/details/101066518

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766

（一）菜单

在main.vue 中加入左侧菜单
注意：学生用户登录是看不见教师和基础数据页面的，所有需要加入判断条件

// An highlighted block
<el-main>
  <el-menu :default-active="$route.path" :collapse="collapsed">
    <template v-for="(item,index) in menus">
      <el-submenu :index="index+''" v-if="!item.leaf">
        <template slot="title">
          <i :class="item.iconCls" style="margin-right: 6px;"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          v-if="currentLoginType == child.auth || currentLoginType == 'admin' || currentLoginType == 'teacher'"
          :index="child.path"
          :key="child.path"
          @click="$router.push(child.path)">
          <i :class="child.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>{{child.name}}
        </el-menu-item>
      </el-submenu>
      <!--<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">-->
        <!--<i :class="item.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>{{item.children[0].name + 'sss'}}-->
      <!--</el-menu-item>-->
    </template>
  </el-menu>
</el-main>

//初始化菜单方法
let initMenu = function() {
  for (let i in this.$router.options.routes) {
    let root = this.$router.options.routes[i]
    if (root.hidden)
      continue
    let children = []
    for (let j in root.children) {
      let item = root.children[j]
      if (item.hidden)
        continue
      children.push(item)
    }
    if (children.length < 1)
      continue

    this.menus.push(root)

    root.children = children
  }
}

（二）首页

（三）学生管理

（四）成绩管理

（五）教师管理

（六）基础数据

（七）日志管理

上一篇：Spring Boot Vue Element入门实战（十五）注册登录路由跨域拦截
下一篇：Spring Boot Vue Element入门实战（十七）Nginx+Tomcat前后端部署
点击这里返回目录

程序人生，更多分享请关注公众号

源代码下载

关注上面公众号，回复源码即可获取gitbug/gitee下载地址