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