pigX前端添加菜单(静态路由 不走接口)

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
    在这里插入图片描述

  • 然后参照原来接口的数据结构

  • 在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值