网站首页 Vue 正文

vue如何从后台获取数据生成动态菜单列表_vue.js

作者：sqwu 更新时间： 2022-06-05 Vue

1.数据准备

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

数据表

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

在这里插入图片描述

2.选择组件

我直接用element-ui的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: [
    {
      path: '/',
      name: 'home',
      meta: {
        key: '1'
      },
      component: () => import("@/views/home"),
      children: [{
        path: '/courseApplication', // 这个路径必须与后端传回数据的m_url字段相对应
        name: 'courseApplication',
        meta: {
          key: '1-1'
        },
        component: () => import('@/views/trainManage/courseApplication') // 要跳转的页面路径
      }]
    }
  ]
})

4.不出问题这样就可以实现动态路由了

在这里插入图片描述

5.完整代码

menu.vue

router 下的index.js根据具体数据进行配置

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        key: '1'
      },
      component: () => import("@/views/home"),
      children: [{
        path: '/courseApplication', // 这个路径必须与后端传回数据的m_url字段相对应
        name: 'courseApplication',
        meta: {
          key: '1-1'
        },
        component: () => import('@/views/trainManage/courseApplication') // 要跳转的页面路径
      }]
    }
  ]
})

-----------------------这是分割线（以下是修改前的）-----------------------

在这里插入图片描述