json路由表
{"success":true,"msg":"獲取成功","response":{"id":0,"pid":0,"order":0,"name":"根節點","IsHide":false,"path":"","iconCls":"","meta":{"title":null,"requireAuth":true,"NoTabPage":false},"children":[{"id":1,"pid":0,"order":0,"name":"QQ歡迎頁","IsHide":false,"path":"/","iconCls":"fa-qq","meta":{"title":"QQ歡迎頁","requireAuth":true,"NoTabPage":false},"children":null},{"id":2,"pid":0,"order":0,"name":"用戶角色管理","IsHide":false,"path":"-","iconCls":"fa-users","meta":{"title":"用戶角色管理","requireAuth":true,"NoTabPage":false},"children":[{"id":3,"pid":2,"order":0,"name":"角色管理","IsHide":false,"path":"/User/Roles","iconCls":null,"meta":{"title":"角色管理","requireAuth":true,"NoTabPage":false},"children":null},{"id":4,"pid":2,"order":0,"name":"用戶管理","IsHide":false,"path":"/User/Users","iconCls":null,"meta":{"title":"用戶管理","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":5,"pid":0,"order":0,"name":"菜單權限管理","IsHide":false,"path":"-","iconCls":"fa-sitemap","meta":{"title":"菜單權限管理","requireAuth":true,"NoTabPage":false},"children":[{"id":6,"pid":5,"order":0,"name":"接口管理","IsHide":false,"path":"/Permission/Module","iconCls":null,"meta":{"title":"接口管理","requireAuth":true,"NoTabPage":false},"children":null},{"id":7,"pid":5,"order":0,"name":"菜單管理","IsHide":false,"path":"/Permission/Permission","iconCls":null,"meta":{"title":"菜單管理","requireAuth":true,"NoTabPage":false},"children":null},{"id":34,"pid":5,"order":0,"name":"權限分配","IsHide":false,"path":"/Permission/Assign","iconCls":null,"meta":{"title":"權限分配","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":10,"pid":0,"order":0,"name":"報表管理","IsHide":false,"path":"-","iconCls":"fa-line-chart","meta":{"title":"報表管理","requireAuth":true,"NoTabPage":false},"children":[{"id":11,"pid":10,"order":0,"name":"圖表","IsHide":false,"path":"/Form/Charts","iconCls":null,"meta":{"title":"圖表","requireAuth":true,"NoTabPage":false},"children":null},{"id":12,"pid":10,"order":0,"name":"表單","IsHide":false,"path":"/Form/Form","iconCls":null,"meta":{"title":"表單","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":29,"pid":0,"order":0,"name":"博客管理","IsHide":false,"path":"-","iconCls":"fa-file-word-o","meta":{"title":"博客管理","requireAuth":true,"NoTabPage":false},"children":[{"id":43,"pid":29,"order":0,"name":"博客","IsHide":false,"path":"/Blog/Blogs","iconCls":"","meta":{"title":"博客","requireAuth":true,"NoTabPage":false},"children":null},{"id":67,"pid":29,"order":0,"name":"博客詳情","IsHide":true,"path":"/Blog/Detail","iconCls":"","meta":{"title":"博客詳情","requireAuth":true,"NoTabPage":true},"children":null}]},{"id":37,"pid":0,"order":0,"name":"測試頁面管理","IsHide":false,"path":"-","iconCls":"fa-flask","meta":{"title":"測試頁面管理","requireAuth":true,"NoTabPage":false},"children":[{"id":38,"pid":37,"order":0,"name":"測試頁面1","IsHide":false,"path":"/TestShow/TestOne","iconCls":"","meta":{"title":"測試頁面1","requireAuth":true,"NoTabPage":false},"children":null},{"id":39,"pid":37,"order":0,"name":"測試頁面2","IsHide":false,"path":"/TestShow/TestTwo","iconCls":"","meta":{"title":"測試頁面2","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":41,"pid":0,"order":0,"name":"多語言管理","IsHide":false,"path":"-","iconCls":"fa-language","meta":{"title":"多語言管理","requireAuth":true,"NoTabPage":false},"children":[{"id":40,"pid":41,"order":0,"name":"國際化","IsHide":false,"path":"/I18n/index","iconCls":"","meta":{"title":"國際化","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":42,"pid":0,"order":0,"name":"問題管理","IsHide":false,"path":"-","iconCls":"fa-bug","meta":{"title":"問題管理","requireAuth":true,"NoTabPage":false},"children":[{"id":28,"pid":42,"order":0,"name":"TiBug","IsHide":false,"path":"/Tibug/Bugs","iconCls":"","meta":{"title":"TiBug","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":44,"pid":0,"order":0,"name":"多級路由","IsHide":false,"path":"-","iconCls":"fa-sort-amount-asc","meta":{"title":"多級路由","requireAuth":true,"NoTabPage":false},"children":[{"id":45,"pid":44,"order":0,"name":"Menu-1","IsHide":false,"path":"-","iconCls":"","meta":{"title":"Menu-1","requireAuth":true,"NoTabPage":false},"children":[{"id":46,"pid":45,"order":0,"name":"Menu-1-2","IsHide":false,"path":"/Recursion/Menu_1/Menu_1_2","iconCls":"","meta":{"title":"Menu-1-2","requireAuth":true,"NoTabPage":false},"children":null},{"id":47,"pid":45,"order":0,"name":"Menu-1-1","IsHide":false,"path":"-","iconCls":"","meta":{"title":"Menu-1-1","requireAuth":true,"NoTabPage":false},"children":[{"id":48,"pid":47,"order":0,"name":"Menu-1-1-1","IsHide":false,"path":"/Recursion/Menu_1/Menu_1_1/Menu_1_1_1","iconCls":"","meta":{"title":"Menu-1-1-1","requireAuth":true,"NoTabPage":false},"children":null}]}]}]},{"id":65,"pid":0,"order":0,"name":"日誌管理","IsHide":false,"path":"-","iconCls":"fa-diamond","meta":{"title":"日誌管理","requireAuth":true,"NoTabPage":false},"children":[{"id":66,"pid":65,"order":0,"name":"全部日誌","IsHide":false,"path":"/Logs/Index","iconCls":"","meta":{"title":"全部日誌","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":68,"pid":0,"order":1,"name":"系統管理","IsHide":false,"path":"-","iconCls":"el-icon-s-operation","meta":{"title":"系統管理","requireAuth":true,"NoTabPage":false},"children":[{"id":69,"pid":68,"order":0,"name":"個人中心","IsHide":false,"path":"/System/My","iconCls":"","meta":{"title":"個人中心","requireAuth":true,"NoTabPage":false},"children":null}]},{"id":8,"pid":0,"order":5,"name":"致謝頁","IsHide":false,"path":"/Thanks","iconCls":"fa-star ","meta":{"title":"致謝頁","requireAuth":true,"NoTabPage":false},"children":null}]}}
代碼實現：
actions: {
GenerateRoutes({ commit, rootState }) {
return new Promise(resolve => {
let accessedRouters = [];
let menuList = rootState.user.menu;
menuList.forEach(function(item,index,arry){
item.component = Layout;
if(item.children&&item.children.length>=1){
item.children.forEach(function(chItem, chIndex,chArry){
let path = chArry[0].path;
if(typeof chItem.component=='string'){
chItem.component = resolve => require([`../../views/` + chItem.component + `.vue`], resolve);
};
item["redirect"] = item.path+"/"+path;
item["meta"] = { "title": item.title,"icon": item.icon};
chItem["meta"] = { "title": chItem.title}
});
};
})
accessedRouters = menuList;
accessedRouters.push({
path: '*',
redirect: '/404',
hidden: true
});
commit('SET_ROUTERS', accessedRouters)
resolve()
})
}
}
後來把組件名字用變量接收下再拼接就可以了，具體原因還在研究，有碰到這個問題的多注意一下，夠坑的；
let comName = chItem.component;
if(typeof chItem.component=='string'){
chItem.component = resolve => require([`../../views` + comName + `.vue`], resolve);
};