路由结构

路由结构

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

path（地址）: kebab-case，层级用 / 分隔；用连字符 - 分层，不要用下划线分层

• 示例: /components/message, /user-profile/security-settings

name（路由名）: PascalCase，语义化，且与组件 defineOptions({ name }) 完全一致（便于 keep-alive）

• 示例: ComponentsMessage, UserProfileSecuritySettings

组件文件名与目录: kebab-case；目录结构与 path 对齐

• 示例: src/views/components/message/index.vue，则路由的 name: "ComponentsMessage"

动态路由:

• 路由段静态部分用 kebab-case，参数标识用 camelCase
• 示例: /orders/:orderId，name: "OrdersDetail"

嵌套路由:

• 子路由 path 写相对路径（不要以 / 开头）
• 父路由: path: "/orders"；子路由: path: "detail/:orderId"

一级路由

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 支持函数式，参数是当前路由信息。