最新公告
  • 欢迎您光临三优资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • crmeb pro 前端添加页面

    侧边栏菜单 sider.js 配置

    侧边菜单一般较多,所以建议拆分模块,便于维护。仍然以上一篇的dashboard为例,创建文件src/menu/modules/dashboard.js

    // src/menu/modules/dashboard.js
    const pre = '/dashboard/';
    
    export default {
        path: '/dashboard',
        title: 'Dashboard',
        header: 'home',
        custom: 'i-icon-demo i-icon-demo-dashboard',
        children: [
            {
                path: `${pre}console`,
                title: '主控台'
            },
            {
                path: `${pre}monitor`,
                title: '监控页'
            }
        ]
    }
    
    

    添加路由 /router/modules 模块,在 /router/routes.js 文件中 children添加模块,例如添加 product 模块路由

    import BasicLayout from '@/layouts/basic-layout';
    
    const pre = 'product_';
    
    export default {
        path: '/admin/product',
        name: 'product',
        header: 'product',
        meta: {
            // 授权标识
            auth: ['admin-store-index']
        },
        redirect: {
            name: `${pre}productList`
        },
        component: BasicLayout,
        children: [
            {
                path: 'product_list',
                name: `${pre}productList`,
                meta: {
                    title: '商品管理',
                    auth: ['admin-store-storeProuduct-index'] //鉴权后台添加的时候会有唯一标示
                },
                component: () => import('@/pages/product/productList')
            },
            {
                path: 'product_classify',
                name: `${pre}productClassify`,
                meta: {
                    title: '商品分类',
                    auth: ['admin-store-storeCategory-index']
                },
                component: () => import('@/pages/product/productClassify')
            },
            {
                path: 'add_product/:id?',
                name: `${pre}productAdd`,
                meta: {
                    auth: ['admin-store-storeProuduct-index'],
                    title: '商品添加'
                },
                component: () => import('@/pages/product/productAdd')
            },
            {
                path: 'product_reply/:id?',
                name: `${pre}productEvaluate`,
                meta: {
                    auth: ['admin-store-storeProuduct-index'],
                    title: '商品评论'
                },
                component: () => import('@/pages/product/productReply')
            },
            {
                path: 'product_attr',
                name: `${pre}productAttr`,
                meta: {
                    auth: ['admin-store-storeProuduct-index'],
                    title: '属性规则'
                },
                component: () => import('@/pages/product/productAttr')
            }
        ]
    };
    

    侧边栏菜单配置项:

    • path:完整的页面路径
    • title:菜单标题
    • icon:(选填)菜单图标,该选项仅支持 iView 内置 icon
    • custom:(选填)菜单自定义图标,该选项可以使用自定义的 iconfont 图标,使用该选项,不可以设置 icon 选项
    • img:(选填)菜单图标,该选项设置的是一个具体的图片文件,使用该选项,不可以设置 icon 与 custom 选项
    • 1.2.0target:当值设置为_blank时,点击会在新窗口中打开链接
    • 1.2.0divided:设置为 true,则菜单折叠时显示分割线
    • header:隶属于哪一个顶部菜单,对应于 header.js 中的 name
    • children:子菜单,支持多级嵌套

    添加动态菜单

    后台设置->权限设置->添加菜单

    隐藏菜单

    菜单必须要配置,如果不配置,则刷新后菜单栏不会显示。如果想要隐藏菜单(顶栏或侧边栏都支持),需要给菜单项配置一个不存在的鉴权信息来实现,比如:

    {
      path: '/dashboard/console',
      title: '主控台',
      auth: ['hidden']  // 不存在的鉴权,所以不会显示该菜单
    }
    
    

    带参菜单2.2.0

    如果您的路由是带参的,比如某个商品详情,这类对应的菜单往往不显示在侧边栏里,只显示到它的父级,因为商品页会有无数个,也预先不知道参数(如 id)。这种情况需要把菜单path设置与带参路由一致,并隐藏,比如:

    {
      path: '/product/:id',
      title: '商品详情',
      auth: ['hidden']
    }
    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3165260857@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!


    三优资源网 » crmeb pro 前端添加页面

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    三优资源网
    一个高级程序员模板开发平台

    发表评论

    • 139会员总数(位)
    • 965资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 378稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情