Vue 路由按需載入(路由懶載入)

需求：vue前後端分離的專案中，需要動態載入所有的選單項，我們無法在router.js裡提前註冊路由資訊。

解決： 需要我們按需註冊路由（即執行時註冊）

步驟（1）後端傳來的component一般都是字串，我們需將其格式化成物件，然後按需註冊。

export const formatRoutes = (routes) => {
    let fmRoutes = [];
    routes.forEach(router => {
        //批量定義資料 後端傳來的menu物件裡的屬性
        let {
            path,
            component,
            name,
            meta,
            iconCls,
            children
        } = router;
        //遞迴子選單
        if(children && children instanceof Array){
            children = formatRoutes(children)
        }
        let fmRouter = {
        	//path 路徑 name 元件的名字
            path: path,
            name: name,
            iconCls: iconCls,
            meta: meta,
            //children是子選單項
            children: children,
            //按需載入
            component(resolve) {
                if (component.startsWith("Home")) {
                	//第一個引數就是元件裡的位置
                    require(['../views/' + component + '.vue'], resolve);
                } else if (component.startsWith("Emp")) {
                    require(['../views/emp/' + component + '.vue'], resolve);
                } else if (component.startsWith("Per")) {
                    require(['../views/per/' + component + '.vue'], resolve);
                } else if (component.startsWith("Sal")) {
                    require(['../views/sal/' + component + '.vue'], resolve);
                } else if (component.startsWith("Sta")) {
                    require(['../views/sta/' + component + '.vue'], resolve);
                } else if (component.startsWith("Sys")) {
                    require(['../views/sys/' + component + '.vue'], resolve);
                }
            }
        }
        fmRoutes.push(fmRouter)
    })
    return fmRoutes
}

（2）將返回的fmRoutes陣列新增至路由中。

		  //data是後端的json字串
		  let fmtRoutes = formatRoutes(data);
          router.addRoutes(fmtRoutes);

此時我們已經將選單項註冊進路由了。