【vue】iView-admin2.0动态菜单路由【版1】

vue项目实现动态路由有俩种方式

一.前端在routers中写好--所有--路由表 <前端控制路由>，登录时根据用户的角色权限来动态的显示菜单路由

二.前端通过调用接口请求拿到当前用户--对应权限的--路由表  <后端处理路由返回>，以动态的显示菜单路由 

 

介绍第二种 （参考资料 segmentfault-大师兄）

左侧菜单可通过 ①本地mock假数据 ②easymock假数据 ③从后台请求返回的数据  方式之一请求而来

介绍方式①本地mock假数据

1.iview-admin的src->mock->data目录下新增菜单路由数据menus-data.js （字段可参照src->router->routers.js中设置）

menus-data.js

export const mockMenuData = [
  {
    'path': '/multilevel',
    'name': 'multilevel',
    'meta': {
      'icon': 'md-menu',
      'title': '多级菜单'
    },
    'component': 'Main',
    'children': [
      {
        'path': '/level_2_1',
        'name': 'level_2_1',
        'meta': {
          'icon': 'md-funnel',
          'title': '二级-1'
        },
        'component': 'multilevel/level-2-1'
      },
      {
        'path': '/level_2_2',
        'name': 'level_2_2',
        'meta': {
          'icon': 'md-funnel',
          'showAlways': true,
          'title': '二级-2'
        },
        'component': 'parentView',
        'children': [
          {
            'path': '/level_2_2_1',
            'name': 'level_2_2_1',
            'meta': {
              'icon': 'md-funnel',
              'title': '三级'
            },
            'component': 'multilevel/level-2-2/level-2-2-1'
          },
          {
            'path': '/level_2_2_2',
            'name': 'level_2_2_2',
            'meta': {
              'icon': 'md-funnel',
              'title': '三级'
            },
            'component': 'multilevel/level-2-2/level-2-2-2'
          }
        ]
      },
      {
        'path': '/level_2_3',
        'name': 'level_2_3',
        'meta': {
          'icon': 'md-funnel',
          'title': '二级-3'
        },
        'component': 'multilevel/level-2-3'
      }
    ]
  },
  {
    'path': '/auth',
    'name': 'auth',
    'meta': {
      'icon': 'md-menu',
      'title': '权限设置',
      'access': ['super_admin']
    },
    'component': 'Main',
    'children': [
      {
        'path': '/role',
        'name': 'role',
        'meta': {
          'icon': 'ios-paper-outline',
          'title': '角色'
        },
        'component': 'auth/role',
        'permission': ['add', 'edit']
      },
      {
        'path': '/cmenu',
        'name': 'cmenu',
        'meta': {
          'icon': 'ios-paper-outline',
          'title': '菜单'
        },
        'component': 'auth/cmenu',
        'permission': ['add', 'del']
      },
      {
        'path': '/account',
        'name': 'account',
        'meta': {
          'icon': 'ios-paper-outline',
          'title': '账号'
        },
        'component': 'auth/account'
      }
    ]
  },
  {
    'path': '/lesmessage',
    'name': 'lesmessage',
    'meta': {
      'icon': 'ios-paper',
      'title': '留言管理'
    },
    'component': 'Main',
    'children': [
      {
        'path': '/list',
        'name': 'list',
        'meta': {
          'icon': 'ios-paper',
          'title': '数据列表'
        },
        'component': 'lesmessage/list'
      }
    ]
  }
]

View Code