VUE-ELEMENT实现动态菜单递归组件

VUE-ELEMENT实现动态菜单递归组件

        刚入行前端的小伙伴们应该都是在公司框架之上进行开发的吧，菜单路由接口调用都给安排的好好的，需要做的只是创建一个vue，链接上路由，开发业务。
        当然啦，仅会写业务的前端格局还是不够打开的，前端更新如此之快系统风格让人眼花缭乱，说不定哪天产品就会觉得之前的框架怎么这么low，你来再重新搭一个！！！
        怎么用vue脚手架搭建一个使用elementUI库对于看到这里的小伙伴我想应该都了如指掌的，那么在这就只和大家学习一下动态菜单的写法。

这里咱们就以这种风格为准。

<div :style="{ height: windowHeight - 50 + 'px' }" style="display: flex">
	  <el-menu
        class="el-menu-vertical-demo menuList"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        :collapse="isCollapse"
      >
        	<tree :menu="menu" :isCollapse="isCollapse"></tree>
      </el-menu>
      <el-scrollbar style="height: 100%; flex: 1">
        	<router-view />
      </el-scrollbar>
</div>


import tree from './menuList/tree.vue'
components: {
    tree
},

        由上述贴出的代码可以了解到import引入的tree便是我们需要递归的树形组件，<router-view />就是我们右侧的容器，同时我们需要把我们的菜单列表menu数据传入。
接下来看一下menu组件的写法

<template>
  <div>
    <label v-for="item in menu" :key="item.index">
      <el-submenu :index="item.index" v-if="item.children">
        <template slot="title">
          <i
            :class="item.icon"
            :style="{ color: '#fff' }"
            style="margin-right: 16px"
          ></i>
          <span>{{ item.title }}</span>
        </template>
        <tree :menu="item.children" :isCollapse="isCollapse" />
      </el-submenu>

      <el-menu-item :index="item.index" v-else>
        <template slot="title">
          <i :class="item.icon" :style="{ color: '#fff' }"></i>
          <span>{{ item.title }}</span>
        </template>
      </el-menu-item>
    </label>
  </div>
</template>
<script>
export default {
  name: 'tree',
  props: {
    menu: Array,
    isCollapse: Boolean
  },
}
</script>
<style scoped lang="scss"></style>

        1.由于vue2再template下还不支持多个标签因此我们需要在外边包裹一层div防止报错。
        2.由于我们是自己调用自己，所以不必使用import引入声明，只要把name改成和上方<tree />标签相同即可。
        3.接下来便是很简单的if-else判断了，el-submenu是父级菜单不可进入；el-menu-item为子菜单，也就是我们业务的页面。我们便通过当前数据有无children属性即可判断得出。
        4.接下来我们通过el-menu的router属性，再从router下index.js注册好路由便可进行跳转了！！！
        最后，一直被动态菜单困扰到我的问题就此解决了，也不是想象中的那么难对吧！希望能帮助到您，有错误或不规范的也希望您能指出，也欢迎大家跟我一起交流学习。