路由结构

路由结构

路由名称的命名规则建议使用 kebab-case 风格，如下：

• 一级路由: demo, demo-page：名称为小写并采用连字符 - 的形式分隔
• 二级路由: demo_child, demo-page_child：路由的层级用下划线 _ 分隔，两边仍然遵守一级路由的命名规则
• 三级及三级以上路由: demo_child_child, demo-page_child_child

一级路由

import { Compass } from "@element-plus/icons-vue";
import { HOME_URL, HOME_NAME } from "@/common/config";

const home: RouterConfigRaw = {
  path: HOME_URL,
  name: HOME_NAME,
  component: "/workbenches/index",
  meta: {
    isAffix: true,
    title: "工作台",
    icon: Compass,
    notClickBread: false,
    hideInBread: false,
    hideInMenu: false,
    isKeepAlive: false,
    useI18n: false,
    useTooltip: false,
    isFull: false,
    hideInTab: false,
  },
};

二级路由

提示

如果没有给父级路由指定 redirect，那么默认指向第一个子级路由。

import { CreditCard, Star } from "@element-plus/icons-vue";

const components: RouterConfigRaw = {
  path: "/components",
  name: "Components",
  meta: {
    title: "组件",
    icon: CreditCard,
  },
  children: [
    {
      path: "message",
      name: "MessageDemo",
      component: () => import("@/views/components/message/index.vue"),
      meta: {
        title: "消息组件",
        icon: Star,
        alwaysShowRoot: false,
        notClickBread: false,
        hideInBread: false,
        hideInMenu: false,
        isKeepAlive: false,
        useI18n: false,
        useTooltip: false,
        isFull: false,
        hideInTab: false,
      },
    },
  ],
};

meta 里的参数都有默认值（目前填写 Boolean 类型的都是默认值），所以实际使用不需要写很多配置项，常用配置项的是 title、icon。

详情路由

import { Star } from "@element-plus/icons-vue";

const detailsRoutes: RouterConfigRaw = {
  path: "/arg",
  name: "Arg",
  redirect: "/arg/params/1",
  meta: {
    hideInMenu: true,
    hideInBread: true,
  },
  children: [
    {
      path: "query",
      name: "Query",
      component: "/tabs/queryDetail",
      meta: {
        title: (route: RouteConfig) => `{{ _route.Query }}-${route.query.id}`,
        icon: Star,
        beforeCloseName: "before_close_normal", // 关闭前的回调，在 `src/router/before-close.ts` 定义
      },
    },
    {
      path: "params/:id",
      name: "Params",
      component: "/tabs/paramsDetail",
      meta: {
        title: (route: RouteConfig) => `{{ _route.Params }}-${route.params.id}`,
        icon: Star,
        beforeCloseName: "before_close_normal",
        dynamicLevel: 3, // 最多可以打开 3 个动态路由
      },
    },
  ],
};

详情页路由 meta.title 支持函数式，参数是当前路由信息。