vue从后台获取数据生成动态菜单列表

vue前后端分离从后台获取menuList生成动态路由

1.数据准备

树形菜单基本数据很简单，只需要菜单id，菜单名称，路由地址，图标。下图中的节点id和父节点id是为了后端生成树形数据，只负责前端的话只需要拿到前面说的四个数据就行。

后端将数据转成树形结构，传给前端的数据结构如图

2.选择组件

我直接用element-ui的el-menu组件，结构是（这是用来注释的，完整代码在后面）

    <el-menu>
      <template v-for="(item, key) in menuList">-----前端得到的数据存放到menuList数组
        <el-submenu :key="key" v-if="item.children && item.children.length!==0" :index="item.m_url">----父级菜单，判断有子节点，index是路由跳转
          <template slot="title">----插槽
            <i :class="item.m_icon"></i>-----图标
            <span>{
  { item.m_name }}</span>----菜单名称
          </template>
          <el-menu-item v-for="(val, index) in item.children" :index="val.m_url" :key="index">----二级菜单
            <template slot="title">
              <i :class="val.m_icon"></i>
              <span>{
  { val.m_name }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-submenu v-else :key="item.m_n_id" :index="item.m_url">没有子节点
          <template slot="title">
            <i :class="item.m_icon"></i>
            <span>{
  { item.m_name }}</span>
          </template>
        </el-submenu>
      </template>
    </el-menu>

3.配置路由

跳转到那个页面是由写在router目录下的index.js的component指定的

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   
  // mode: 'history',
  routes