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

1.数据准备

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

vue如何从后台获取数据生成动态菜单列表_第1张图片

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

vue如何从后台获取数据生成动态菜单列表_第2张图片

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.不出问题这样就可以实现动态路由了

vue如何从后台获取数据生成动态菜单列表_第3张图片

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') // 要跳转的页面路径
      }]
    }
  ]
})

-----------------------这是分割线(以下是修改前的)-----------------------

vue如何从后台获取数据生成动态菜单列表_第4张图片

将目录作为子目录添加到首页下面,可以显示出来,但是第二次点击同一个菜单时,会出现

在这里插入图片描述

地址叠加的情况,导致页面不能显示。而且先点击到别的页面也会出现这种情况

在这里插入图片描述

解决办法:在获取动态列表的时候,数据里面有url和source,不要去获取source,内层外层循环都获取url,然后在router/index 里面,path改为跟获取的url一样的内容

在这里插入图片描述

vue如何从后台获取数据生成动态菜单列表_第5张图片

添加路由

这个path主要是为了匹配菜单,最终调取页面是由component完成的。

刚开始的时候还有一个问题:

就是点击菜单栏的某一项,会全屏显示某一个页面,而不是懒加载的方式,只显示在中间部分,解决办法是将获取的路由放在跟路由下面,作为子组件呈现出来

vue如何从后台获取数据生成动态菜单列表_第6张图片

完整代码


          
            
          
        

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

你可能感兴趣的:(vue如何从后台获取数据生成动态菜单列表)