静态路由配置

无子路由

创建页面

• src/views/user/index.vue

<script setup lang="ts">
import { Page } from "@vben/common-ui";

import { ElButton, ElMessage } from "element-plus";

function handleClick() {
  ElMessage.success("点击了按钮");
}
</script>

<template>
  <Page description="User页面" title="User使用">
    <ElCard>
      <template #header>
        <div class="flex items-center">
          <span class="flex-auto">User使用</span>
          <ElButton type="primary" @click="handleClick">点击按钮</ElButton>
        </div>
      </template>
      <Form />
    </ElCard>
  </Page>
</template>

<style lang="scss" scoped></style>

修改路由

• src/router/routes/modules/user.ts

import type { RouteRecordRaw } from "vue-router";

import { BasicLayout } from "#/layouts";
import { $t } from "#/locales";

const routes: RouteRecordRaw[] = [
  {
    component: BasicLayout,
    meta: {
      icon: "ic:baseline-person",
      keepAlive: true,
      order: 999, // 菜单排序
      title: $t("user.title"),
      hideChildrenInMenu: true,
    },
    name: "User",
    path: "/user",
    redirect: "/user/index",
    children: [
      {
        meta: {
          title: $t("user.title"),
        },
        name: "UserIndex",
        path: "/user/index",
        component: () => import("#/views/user/index.vue"),
      },
    ],
  },
];

export default routes;

• src/locales/langs/zh-CN/user.json

{
  "title": "用户",
  "index": "用户管理"
}

• src/locales/langs/en-US/user.json

{
  "title": "User",
  "index": "User Management"
}

有子路由

创建两个页面

• src/views/blog/article/index.vue

<script setup lang="ts">
import { Page } from "@vben/common-ui";

import { ElButton, ElMessage } from "element-plus";

function handleClick() {
  ElMessage.success("点击了按钮");
}
</script>

<template>
  <Page description="文章页面" title="文章详情">
    <ElCard>
      <template #header>
        <div class="flex items-center">
          <span class="flex-auto">文章详情</span>
          <ElButton type="primary" @click="handleClick">点击按钮</ElButton>
        </div>
      </template>
      <Form />
    </ElCard>
  </Page>
</template>

<style lang="scss" scoped></style>

• src/views/blog/tags/index.vue

<script setup lang="ts">
import { Page } from "@vben/common-ui";

import { ElButton, ElMessage } from "element-plus";

function handleClick() {
  ElMessage.success("点击了按钮");
}
</script>

<template>
  <Page description="标签页面" title="标签列表">
    <ElCard>
      <template #header>
        <div class="flex items-center">
          <span class="flex-auto">标签列表</span>
          <ElButton type="primary" @click="handleClick">点击按钮</ElButton>
        </div>
      </template>
      <Form />
    </ElCard>
  </Page>
</template>

<style lang="scss" scoped></style>

修改路由

• src/router/routes/modules/blog.ts

import type { RouteRecordRaw } from "vue-router";

import { BasicLayout } from "#/layouts";
import { $t } from "#/locales";

const routes: RouteRecordRaw[] = [
  {
    component: BasicLayout,
    meta: {
      icon: "ic:baseline-article",
      keepAlive: true,
      order: 10_001,
      title: $t("blog.title"),
    },
    name: "Blog",
    path: "/blog",
    children: [
      {
        meta: {
          title: $t("blog.article"),
          icon: "ic:baseline-article",
        },
        name: "BlogArticle",
        path: "/blog/article",
        component: () => import("#/views/blog/article/index.vue"),
      },
      {
        meta: {
          title: $t("blog.tags"),
          icon: "ic:baseline-article",
        },
        name: "BlogTags",
        path: "/blog/tags",
        component: () => import("#/views/blog/tags/index.vue"),
      },
    ],
  },
];

export default routes;

• src/locales/langs/zh-CN/blog.json

{
  "title": "博客",
  "article": "文章管理",
  "tags": "标签管理"
}

• src/locales/langs/en-US/blog.json

{
  "title": "Blog",
  "article": "Articles",
  "tags": "Tags"
}

菜单隐藏

• 重点在每个路由的meta里面写

字段	作用
hideInMenu	在菜单中隐藏（ 当前需求 ）
hideInTab	不在标签页（Tabs）中显示
hideInBreadcrumb	不在面包屑中显示
hideChildrenInMenu	隐藏所有子菜单（用于父级路由）