前端添加页面

:-: 前端添加页面

侧边栏菜单 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']
}