Vue3動態添加路由及生成菜單

前面講了Vue2項目中動態添加路由及生成菜單，今天嘗試在Vue3中動態添加路由及生成菜單。

最近在嘗試用Vue3開發個管理平臺項目，一切都是從頭開始，基本框架搭建，熟悉Vue3寫法，編寫登陸頁，編寫路由守衛，上面功能已基本完成，開始編寫首頁佈局，用Vue3就必須用Router4.x版本，因此以前的代碼遷移過來以後發現，動態路由不生效，查了不少資料，最後發現，Router4中，去掉了 router.addRoutes ，只能使用 addRoute

因此以前的寫法就要相應的調整，以前是能夠動態添加更多的路由規則，參數必須是一個符合 routes 選項要求的數組。

router.addRoutes(routes: Array<RouteConfig>);

如今是隻能添加一個

router.addRoute("名稱", {
  path: `/index`,
  name: '首頁',
  component: () => import(`@/index.vue`)
});

接下來就詳細說明

1 路由數據封裝

前臺把路由寫在代碼裏，這種方式只適用部分狀況，因此大部分狀況是路由後臺提供，好比返回格式以下：

{
    "code": 0,
    "msg": "success",
    "data": [{
        "id": 1000,
        "parentId": -1,
        "icon": "iconquanxian",
        "name": "組織架構",
        "path": "/system",
        "component": "Layout",
        "redirect": null,
        "type": "0",
        "children": [{
            "id": 1100,
            "parentId": 1000,
            "children": [],
            "icon": "iconyonghuguanli",
            "name": "用戶管理",
            "path": "/user",
            "component": "views/system/user/index",
            "redirect": null,
            "type": "0",
        }],

    }, {
        "id": 2000,
        "parentId": -1,
        "icon": "iconquanxian",
        "name": "權限管理",
        "path": "/organization",
        "component": "Layout",
        "redirect": null,
        "type": "0",
        "children": [{
            "id": 2100,
            "parentId": 2000,
            "children": [],
            "icon": "iconyonghuguanli",
            "name": "菜單管理",
            "path": "/menu",
            "component": "views/system/user/index",
            "redirect": null,
            "type": "0",
        }],

    }]
}

這種是後臺樹型結構返回，前臺不須要進行二次處理能夠直接顯示成菜單，

<a-menu
  theme="dark"
  mode="inline"
>
  <a-sub-menu v-for="subitem in menuData.menu" :key="subitem.path">
    <template #title>
      <Icon-font :type="subitem.icon" />
      <span>{{ subitem.name }}</span>
    </template>
    <a-menu-item v-for="item in subitem.children" :key="item.path">{{
      item.name
    }}</a-menu-item>
  </a-sub-menu>
</a-menu>

可是路由須要從新封裝，先說說用到的字段，path-路由地址、component這個如今有兩種，一種是Layout表明父菜單，另外一種views開頭的是組件地址。那麼咱們就能夠開始動態生成路由了，寫法和Vue2項目有所不一樣，首先定義一個方法，

const routerPackag = routers => {
  routers.filter(itemRouter => {
    if (itemRouter.component != "Layout") {
      router.addRoute("BasicLayout", {
        path: `${itemRouter.path}`,
        name: itemRouter.name,
        component: () => import(`@/${itemRouter.component}`)
      });
    }
    // 是否存在子集
    if (itemRouter.children && itemRouter.children.length) {
      routerPackag(itemRouter.children);
    }
    return true;
  });
};

2 調用

上面這個方式是動態生成路由，接下來就是調用這個方法。

getBasisMenu().then(res => {
  if (res.code == 0) {
    routerPackag(res.data);
  }
});

3 效果

動態路由實現了，可是如今還有部分問題未解決

代碼在gitee上，能夠直接運行。