Vue 动态添加路由及生成菜单

不同角色有不同的权限，这时如果管理平台的菜单定义在代码里，显然是不能满足上面的需求，我们就需要后台提供用户菜单，然后前台动态生成路由。

1 动态添加路由

利用 vue-router 的 addRoutes 方法可以动态添加路由。请求接口返回菜单格式如下

[
    {
        "id":"1332194352530083842",
        "pid":"1331859957655007233",
        "name":"TspUser",
        "component":"user/tspuser/index",
        "redirect":null,
        "meta":{
            "title":"用户信息 ",
            "icon":"pic-right",
            "show":true,
            "target":null,
            "link":null
        },
        "path":"/user",
        "hidden":false
    },
    {
        "id":"1334396728339042306",
        "pid":"1333592942347546625",
        "name":"Product",
        "component":"fota/product/index",
        "redirect":null,
        "meta":{
            "title":"产品信息",
            "icon":"pic-right",
            "show":true,
            "target":null,
            "link":null
        },
        "path":"/product",
        "hidden":false
    }
]

path是地址栏显示路径，component是这个菜单对应的文件地址。这里返回的结构并没有按照树型返回，都是平级，所以前台需要重新梳理关系。定义一个方法

routerPackag(routers) {
  let accessedRouters = routers.filter(router => {
    if (router.component === "Layout") {
      // Layout组件特殊处理
      router.component = Layout;
    } else {
      //处理组件---重点
      router.component = this.loadView(router.component);
    }
    //存在子集
    if (router.children && router.children.length) {
      router.children = this.routerPackag(router.children);
    }
    return true;
  });
  return accessedRouters;
},
loadView(view) {
  // 路由懒加载
  return () => import(`@/${view}`);
},

这个方法就是把平级的处理成正确的父子级，同时路由懒加载。

2 生成菜单

后台提供的菜单数据需要前台身体生成菜单树。

<a-layout-sider
  :class="themeStyle == 'light'?'rightbg':'darkbg'"
  :trigger="null"
  collapsible
  v-model="collapsed"
>
  <div :class="themeStyle == 'light'?'rightlogo':'darklogo'">
    <img class="l-logo" v-show="collapsed" src="../assets/logo.png" a
    <span v-show="!collapsed">管理平台</span>
  </div>
  <a-menu
    mode="inline"
    :theme="themeStyle"
    :openKeys="openKeys"
    @click="selectItem"
    :selectedKeys="[$route.path]"
    @openChange="onOpenChange"
  >
    <a-sub-menu v-for="item in menu" :key="item.id">
      <span slot="title">
        <i class="iconfont" :class="item.icon"></i>
        <span v-show="!collapsed">
          {{lang == "cn"
          ? item.name
          : lang == "en"
          ? item.nameEnUS
          : lang == "tw"
          ? item.nameZhTW
          : item.nameJA}}
        </span>
      </span>
      <a-menu-item
        v-for="childrenitem in item.children"
        :key="childrenitem.showPath"
        @click="titleClick(item,childrenitem)"
      >
        <i class="iconfont" :class="childrenitem.icon"></i>
        <span>
          {{lang == "cn"
          ? childrenitem.name
          : lang == "en"
          ? childrenitem.nameEnUS
          : lang == "tw"
          ? childrenitem.nameZhTW
          : childrenitem.nameJA}}
        </span>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</a-layout-sider>