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
  • 4
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值