側(cè)邊欄菜單 sider.js 配置

側(cè)邊菜單一般較多，所以建議拆分模塊，便于維護(hù)。仍然以上一篇的dashboard為例，創(chuàng)建文件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: '主控臺(tái)'
        },
        {
            path: `${pre}monitor`,
            title: '監(jiān)控頁(yè)'
        }
    ]
}

添加路由 /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: {
        // 授權(quán)標(biāo)識(shí)
        auth: ['admin-store-index']
    },
    redirect: {
        name: `${pre}productList`
    },
    component: BasicLayout,
    children: [
        {
            path: 'product_list',
            name: `${pre}productList`,
            meta: {
                title: '商品管理',
                auth: ['admin-store-storeProuduct-index'] //鑒權(quán)后臺(tái)添加的時(shí)候會(huì)有唯一標(biāo)示
            },
            component: () => import('@/pages/product/productList')
        },
        {
            path: 'product_classify',
            name: `${pre}productClassify`,
            meta: {
                title: '商品分類(lèi)',
                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: '商品評(píng)論'
            },
            component: () => import('@/pages/product/productReply')
        },
        {
            path: 'product_attr',
            name: `${pre}productAttr`,
            meta: {
                auth: ['admin-store-storeProuduct-index'],
                title: '屬性規(guī)則'
            },
            component: () => import('@/pages/product/productAttr')
        }
    ]
};

側(cè)邊欄菜單配置項(xiàng)：

• path：完整的頁(yè)面路徑
• title：菜單標(biāo)題
• icon：（選填）菜單圖標(biāo)，該選項(xiàng)僅支持 iView 內(nèi)置 icon
• custom：（選填）菜單自定義圖標(biāo)，該選項(xiàng)可以使用自定義的 iconfont 圖標(biāo)，使用該選項(xiàng)，不可以設(shè)置 icon 選項(xiàng)
• img：（選填）菜單圖標(biāo)，該選項(xiàng)設(shè)置的是一個(gè)具體的圖片文件，使用該選項(xiàng)，不可以設(shè)置 icon 與 custom 選項(xiàng)
• 1.2.0target：當(dāng)值設(shè)置為_blank時(shí)，點(diǎn)擊會(huì)在新窗口中打開(kāi)鏈接
• 1.2.0divided：設(shè)置為 true，則菜單折疊時(shí)顯示分割線
• header：隸屬于哪一個(gè)頂部菜單，對(duì)應(yīng)于 header.js 中的 name
• children：子菜單，支持多級(jí)嵌套

添加動(dòng)態(tài)菜單

后臺(tái)設(shè)置->權(quán)限設(shè)置->添加菜單

隱藏菜單

菜單必須要配置，如果不配置，則刷新后菜單欄不會(huì)顯示。如果想要隱藏菜單（頂欄或側(cè)邊欄都支持），需要給菜單項(xiàng)配置一個(gè)不存在的鑒權(quán)信息來(lái)實(shí)現(xiàn)，比如：

{
  path: '/dashboard/console',
  title: '主控臺(tái)',
  auth: ['hidden']  // 不存在的鑒權(quán)，所以不會(huì)顯示該菜單
}

帶參菜單2.2.0

如果您的路由是帶參的，比如某個(gè)商品詳情，這類(lèi)對(duì)應(yīng)的菜單往往不顯示在側(cè)邊欄里，只顯示到它的父級(jí)，因?yàn)樯唐讽?yè)會(huì)有無(wú)數(shù)個(gè)，也預(yù)先不知道參數(shù)（如 id）。這種情況需要把菜單path設(shè)置與帶參路由一致，并隱藏，比如：

{
  path: '/product/:id',
  title: '商品詳情',
  auth: ['hidden']
}