0. 前言

本文主要是根据个人开发过程补充的一些路由参数说明

项目地址：https://github.com/Daymychen/art-design-pro

动态页面参数类型文件位于src/types/menu.d.ts

内容为

export type MenuListType = {
  id: number;
  path: string; // 路由
  name: string; // 组件名
  component?: string; // 改为字符串类型，表示组件路径
  meta: {
    title: string; // 菜单名称
    icon?: string; // 菜单图标
    showBadge?: boolean; // 是否显示徽标
    showTextBadge?: string; // 是否显示徽标文字
    isHide?: boolean; // 是否在菜单中隐藏
    isHideTab?: boolean; // 是否在标签页中隐藏
    link?: string; // 链接
    isIframe?: boolean; // 是否是 iframe
    keepAlive: boolean; // 是否缓存
    authList?: Array; // 可操作权限
    isInMainContainer?: boolean; // 是否在主容器中
  };
  children?: MenuListType[]; // 子菜单
};

以下关于其中参数的具体讲解

1. id

菜单id，使用数据库主键id即可

例子：

id: 18

2. path

vue路由，页面导航路径

例子：

path: '/result',

path: 'menu2',

注意当采用这种带有子路由的地址时，会自动拼接父路径

{
  id: 402,
    path: 'nested',
    name: 'Nested',
    component: '',
    meta: {
          title: 'menus.menu.nested',
          icon: '&#xe676;',
            keepAlive: true
    },
    children: [
      {
        id: 40201,
        path: 'menu1',
        name: 'NestedMenu1',
        component: RoutesAlias.NestedMenu1,
        meta: {
          title: 'menus.menu.menu1',
          icon: '&#xe676;',
          keepAlive: true
        }
      },
    ]
}

地址栏显示如下

3. name

组件名，一般来说采用path字符串然后改首字母为大写即可

例子：

path: 'permission',

name: 'Permission',

4. component

组件地址，组件放置在前端项目中的相对路径

例子：

component: RoutesAlias.Permission,

在项目的例子中RoutesAlias在项目中src/router/modules/routesAlias.ts处

这个组件在RoutesAlias是这样的

Permission = '/menu/Permission', // 权限

5. title

菜单名称，下图框内的内容

可以使用i18n的键或者字符串

使用i18n键
使用字符串

6. icon

菜单图标

项目作者提供的关于图标的文档：https://www.lingchen.kim/art-design-pro/docs/guide/essentials/icon.html

7. showBadge

是否显示徽标

菜单右侧的小红点

8. showTextBadge

徽标文字

当showBadge为true且showTextBadge属性存在时，显示徽标文字不显示徽标

9. isHide

是否隐藏图标

10. isHideTab

是否在标签页隐藏

例如在个人中心就是在标签页隐藏的，点击个人中心的时候不会在箭头处展示标签页，而普通菜单页面文字滚动则会显示在这里。

11. link

外部链接，可以配合iframe展示外部的页面或者组件等

12. iframe

是否为iframe组件

项目中自带的element-ui的页面就使用了link + iframe

效果如下：

13. keepAlive

是否缓存
keepAlive 是一个布尔类型的参数，用于控制组件是否应该被缓存。当 keepAlive 设置为 true 时，表示该路由组件在切换到其他路由时不会被销毁，而是被保留在内存中，这样当用户再次访问该路由时，组件可以快速恢复到之前的状态，而不需要重新创建和初始化。

14. authList

可操作权限

在文章路由中是这样的

authList: [
  {
    id: 2021,
    title: '新增',
    auth_mark: 'add'
  },
  {
    id: 2022,
    title: '编辑',
    auth_mark: 'edit'
  }
]

此时的文章页面是这样的

在例子中的文章组件新增文章处使用了v-auth="'add'"，所以此处配合auth_mark: 'add'可以显示出来

如果我们删除

{
  id: 2021,
  title: '新增',
  auth_mark: 'add'
},

那么新增按钮就会消失

15. isInMainContainer

是否在主容器内

如果修改为false，会呈现如下效果

可以看到左侧和上方没有菜单，只能看到更新日志页面

16. children

子菜单列表

WBlog

Art-Design-Pro路由参数说明