基于Vue的动态菜单和视图控制

前言

在前一篇文章中我通过addRoutes的方法实现了路由层面的权限控制，具体看基于Vue的addRoutes实现权限控制一文。本篇将着重介绍不同权限的菜单栏动态生成的方法以及不同权限渲染不同的控件。

动态生成菜单

在后台登录接口仅仅只返回给我当前登录账号权限的情况下，因为菜单和路由其实是一一对应的关系，所以在编写路由表的时候就给路由添加了相应的菜单属性

export const dynamicRouter =[ //动态路由
  {
    path: '/',
    name: 'home',
    meta: {  //添加meta标签，里面自定义了roles，用来设置权限
      roles:['admin','user'], //该路由仅admin和user权限访问
    },
    component: (resolve) => require(['../components/home.vue'], resolve)
  },
  {
    path:'/home21',
    name:'home222',
    meta:{
      roles:['user'],
      menu: ['普通用户'] //menu表示菜单内容
    },
    component: (resolve) => require(['../components/home21'], resolve)
  },
  {
    path:'/home11',
    name:'home111',
    meta:{
      roles:['adm