后台前端添加页面

添加动态菜单

设置 > 管理权限 > 权限规则
侧边导航设置项：

path：完整的页面路径
title：菜单标题
icon：（选填）菜单图标，该选项仅支持 iView 内置 icon

1、添加主框架内的页面（导航菜单下的页面）

侧边菜单一般较多，所以建议拆分模块，便于维护。以order为例，创建src/router/modules/order.js文件；

import BasicLayout from '@/components/main';(此为页面导航组件，在导航下的页面必写)

const pre = 'order_';

export default {
    path: '/admin/order',
    name: 'order',
    header: 'order',
    redirect: {
        name: `${pre}list`
    },
    component: BasicLayout,
    children: [
        {
            path: 'list',
            name: `${pre}list`,
            meta: {
                auth: ['admin-order-storeOrder-index'],
                title: '订单管理'
            },
            component: () => import('@/pages/order/orderList/index')
        }
    ]
};

在src/router/routers.js里面引用以及导出；

import order from './modules/order';
// 放入数组内
const frameIn = [order];
// 导出需要显示菜单的
export const frameInRoutes = frameIn;
// 重新组织后导出
export default [...frameIn];

2、主框架之外显示（非导航菜单下的页面）

1、以frameOuts.js为例，创建src/router/modules/frameOuts.js文件

const pre = 'kefu_';
export default [
 // 客服
    {
        path: '/kefu',
        name: `${pre}index`,
        meta: {
            auth: true,
            title: '客服管理',
            kefu: true
        },
        component: () => import('@/pages/kefu/index')
    }
]

在src/router/routers.js里面引用以及导出；

import frameOut from './modules/frameOut'
const frameOuts = frameOut;
// 重新组织后导出
export default [...frameOuts];

3、隐藏菜单

如果想要隐藏菜单（顶栏或侧边栏都支持），需要给菜单项配置一个不存在的鉴权信息来实现，比如：

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

4、带参页面

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

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

页面中接收参数：this.$route.params.id

Provide feedback

Saved searches