CRMEB v4 前端添加頁面

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

側(cè)邊菜單一般較多，所以建議拆分模塊，便于維護。仍然以上一篇的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: '主控臺'
        },
        {
            path: `${pre}monitor`,
            title: '監(jiān)控頁'
        }
    ]
}

添加路由 /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)識
        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)后臺添加的時候會有唯一標(biāo)示
            },
            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: '屬性規(guī)則'
            },
            component: () => import('@/pages/product/productAttr')
        }
    ]
};

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

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

添加動態(tài)菜單

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

隱藏菜單

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

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

帶參菜單2.2.0

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

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