路由配置

路由是整套系统中最重要的存在，和系统左侧导航、页面标题甚至页面缓存都存在一定的关系。路由分为 系统路由 和 自定义路由 两部分。

系统路由

当某些页面与业务脱节，而且基本上不会有变动页面，比如403 、 404 、 /login 、 /register等的页面可作为系统路由固定在路由表。 系统路由 定义在 @/router/index.ts，并且此文件包含全局路由守卫代码。

自定义路由

自定义路由 定义在 @/config/routes.ts，在路由配置中可以配置路由的标题，图标，是否在菜单中显示等。

路由定义

export type CustomRouteMeta = {
    affix?: boolean;            // 标签是否置顶
    keepAlive?: boolean;        // 是否缓存页面
    hideInMenu?: boolean;       // 是否在菜单中隐藏
    hideInBreadcrumb?: boolean; // 是否在面包屑中隐藏
    hideInTag?: boolean;        // 是否在标签中隐藏
    auth?: boolean;             // 是否开启权限控制
    title: string;              // 页面标题
    icon?: string;              // 页面图标
};
export type CustomRouteRaw = {
    meta?: CustomRouteMeta;
    name?: string;               // 路由名称
    path?: string;               // 页面路由
    link?: string;               // 外链地址
    redirect?: string;           // 默认重定向地址
    children?: CustomRouteRaw[]; // 子页面配置
    component?: string;          // 组件
};

api

CustomRouteRaw

属性名	说明	类型	默认值	说明
meta	路由元数据	CustomRouteMeta	-	见下表
name	路由名称	string	-	没有设置路由名称会自动生成一个10位的随机字符串来代替
path	页面路由	string	-	path字段和link字段必须存在一个
link	外链地址	string	-	path字段和link字段必须存在一个
redirect	默认重定向地址	string	-	必须设置path字段才能生效
component	组件路径	string	-	需要以`@/views`开头，组件结尾如果为`index.vue`时可省略
children	子页面配置	CustomRouteRaw[]	[]

CustomRouteMeta

属性名	说明	类型	默认值	说明
affix	标签是否置顶	boolean	false	置顶以后的标签不可关闭
keepAlive	是否缓存页面	boolean	true	默认开启页面缓存，缓存以后的组件新增`active`和`deactive`两个生命周期
hideInMenu	是否在菜单中隐藏	boolean	false
hideInBreadcrumb	是否在面包屑中隐藏	boolean	false
hideInTag	是否在标签中隐藏	boolean	false
auth	是否开启权限控制	boolean	true	关闭以后此路由及子路由不再进行权限验证，可以任意访问
title	页面标题	string	-	路由标题，此项必须设置
icon	页面图标	string	-	菜单图标，可设置element plus中的图标，例如：`el-icon-link`、`ElIconLink`、`Link`

路由示例

import type { CustomRouteRaw } from "@/router/type";

export default [
    {
        path: "/",
        redirect: "/dashboard",
        meta: {
            hideInMenu: true,
        },
    },
    {
        path: "/dashboard",
        meta: {
            title: "首页",
            affix: true,
        },
        component: "@/views/dashboard",
    },
    {
        path: "/channel",
        meta: {
            title: "渠道管理",
            icon: "Suitcase",
        },
        children: [
            {
                path: "manager",
                meta: {
                    title: "渠道经理管理",
                },
                redirect: "list",
                children: [
                    {
                        path: "list",
                        meta: {
                            hideInMenu: true,
                            title: "渠道经理管理",
                        },
                        component: "@/views/channel/manager/list",
                    },
                    {
                        path: "add",
                        meta: {
                            title: "添加渠道经理",
                            hideInMenu: true,
                        },
                        component: "@/views/channel/manager/details",
                    },
                    {
                        path: "edit",
                        meta: {
                            title: "编辑渠道经理",
                            hideInMenu: true,
                        },
                        component: "@/views/channel/manager/details",
                    },
                ],
            },
            {
                path: "/channel/promoter",
                meta: {
                    title: "地推人员管理",
                    auth: false,
                },
                redirect: "list",
                children: [
                    {
                        path: "/channel/promoter/list",
                        meta: {
                            title: "地推人员管理",
                            hideInMenu: true,
                        },
                        component: "@/views/channel/promoter",
                    },
                    {
                        path: "/channel/promoter/details",
                        meta: {
                            hideInMenu: true,
                        },
                        component: "@/views/channel/promoter/details",
                    },
                ],
            },
        ],
    },
    {
        path: "link",
        meta: {
            title: "外部链接",
            icon: "Link",
        },
        children: [
            {
                link: "https://www.baidu.com",
                meta: {
                    title: "百度",
                    auth: false,
                },
            },
            {
                link: "https://www.google.cn",
                meta: {
                    title: "谷歌",
                },
            },
        ],
    },
    {
        link: "http://www.caih.com",
        meta: {
            title: "东信",
            auth: false,
        },
    },
] as CustomRouteRaw[];

路由配置 ​

系统路由 ​

自定义路由 ​

路由定义 ​

api ​

CustomRouteRaw ​

CustomRouteMeta ​

路由示例 ​