pigX前端添加菜单(静态路由 不走接口)
最近又开始用pigx框架,里面很多东西都是封装好的的,有些不适合现在的业务需求,翻了一遍代码,
开始改!!!
菜单添加静态路由
// 静态路由文件 router/menu.js
import Layout from '@/page/index/';
export default [
{
path: '/test',
component: Layout,
name: '组件页',
children: [
{
path: 'index',
name: '组件',
component: () => import(/* webpackChunkName: "test" */ '@/page/test/index')
}
]
}
];
// 在 store/user.js 中
//静态路由数据列表
import MenuRouter from "@/router/menu.js";
//递归处理路由数据 (简易)
function formatChild(p,arr) {
let newarr = [];
if (arr && arr.length) {
newarr = arr.map((v) => {
v.children = v.children?v.children:[];
return {
label: v.name || v.path,
pathKey: v.path,
path: p.path === '/' ? '' : p.path + '/' + v.path,
icon: 'icon-shuju',
children: formatChild(v, v.children) || [],
menuType: '1'
};
});
}
return newarr;
}
// mutations 中的方法
//往本地的session中存菜单列表,因为做vuex持久化也是先从session中取的菜单,所以在存之前把静态路由数据处理一下拼接上
SET_MENU: (state, params = {}) => {
const { menu, type } = params;
//------------
const myMenu = MenuRouter.map((v) => {
v.children = formatChild(v, v.children);
return {
label: v.name || v.path,
path: v.path,
icon: 'icon-shuju',
children: v.children,
parentId: '-1',
menuType: '0'
pathKey: v.path
};
});
const menus = menu.concat(myMenu);
//-------------
if (type !== false) state.menu = menus;
setStore({
name: 'menu',
content: menus,
type: 'session'
});
},
-
转化成菜单数据 是因为这里(const/website.js)有规定的 几个key
-
然后参照原来接口的数据结构