路由和菜单

项目提供了基础的路由系统，可以根据配置文件动态生成菜单结构以及动态注册路由。

路由类型

项目中的路由分为两类：静态路由 和 动态路由。

静态路由：在项目启动时就已确定，通常包含登录页、404 等公共页面。

动态路由：在用户登录后，根据后端返回的菜单数据动态生成，通常用于控制权限和个性化导航。

静态路由

无需权限即可访问的基础页面路由，例如：登录页、注册页、404、500 等。

配置位置：src/router/routes/staticRoutes.ts

路由变量：

const staticRoutes: AppRouteRecordRaw[] = [];

动态路由

需要权限控制的业务页面路由，例如：用户管理、菜单管理等。

配置位置： src/router/routes/asyncRoutes.ts

const asyncRoutes: MenuListType[] = [];

路由定义

静态路由与动态路由的定义方式基本一致，请看下面的示例：

静态路由

静态路由配置

export const staticRoutes: AppRouteRecordRaw[] = [
  {
    path: "/auth/login",
    name: "Login",
    component: () => import("@views/auth/login/index.vue"),
    meta: { title: "menus.login.title", isHideTab: true },
  },
  {
    path: "/auth/register",
    name: "Register",
    component: () => import("@views/auth/register/index.vue"),
    meta: { title: "menus.register.title", isHideTab: true },
  },
  {
    path: "/auth/forget-password",
    name: "ForgetPassword",
    component: () => import("@views/auth/forget-password/index.vue"),
    meta: { title: "menus.forgetPassword.title", isHideTab: true },
  },
  {
    path: "/403",
    name: "Exception403",
    component: () => import("@views/exception/403/index.vue"),
    meta: { title: "403", isHideTab: true },
  },
  {
    path: "/:pathMatch(.*)*",
    name: "Exception404",
    component: () => import("@views/exception/404/index.vue"),
    meta: { title: "404", isHideTab: true },
  },
  {
    path: "/500",
    name: "Exception500",
    component: () => import("@views/exception/500/index.vue"),
    meta: { title: "500", isHideTab: true },
  },
  {
    path: "/outside",
    component: () => import("@views/index/index.vue"),
    name: "Outside",
    meta: { title: "menus.outside.title" },
    children: [
      // iframe 内嵌页面
      {
        path: "/outside/iframe/:path",
        name: "Iframe",
        component: () => import("@/views/outside/Iframe.vue"),
        meta: { title: "iframe" },
      },
    ],
  },
];

动态路由

动态路由配置

export const dashboardRoutes: AppRouteRecord = {
  name: "Dashboard",
  path: "/dashboard",
  component: "/index/index",
  meta: {
    title: "menus.dashboard.title",
    icon: "ri:pie-chart-line",
    roles: ["R_SUPER", "R_ADMIN"],
  },
  children: [
    {
      path: "console",
      name: "Console",
      component: "/dashboard/console",
      meta: {
        title: "menus.dashboard.console",
        keepAlive: false,
        fixedTab: true,
      },
    },
    {
      path: "analysis",
      name: "Analysis",
      component: "/dashboard/analysis",
      meta: {
        title: "menus.dashboard.analysis",
        keepAlive: false,
      },
    },
    {
      path: "ecommerce",
      name: "Ecommerce",
      component: "/dashboard/ecommerce",
      meta: {
        title: "menus.dashboard.ecommerce",
        keepAlive: false,
      },
    },
  ],
};

嵌套路由

嵌套路由配置

{
  path: '/system',
  name: 'System',
  component: "/index/index",
  meta: {
    title: 'menus.system.title',
    icon: 'ri:user-3-line',
    roles: ['R_SUPER', 'R_ADMIN']
  },
  children: [
    {
      path: 'nested',
      name: 'Nested',
      component: '',
      meta: {
        title: 'menus.system.nested',
        keepAlive: true
      },
      children: [
        {
          path: 'menu1',
          name: 'NestedMenu1',
          component: "/system/nested/menu1",
          meta: {
            title: 'menus.system.menu1',
            icon: 'ri:align-justify',
            keepAlive: true
          }
        },
        {
          path: 'menu2',
          name: 'NestedMenu2',
          component: '',
          meta: {
            title: 'menus.system.menu2',
            icon: 'ri:align-justify',
            keepAlive: true
          },
          children: [
            {
              path: 'menu2-1',
              name: 'NestedMenu2-1',
              component: "/system/nested/menu2",
              meta: {
                title: 'menus.system.menu21',
                icon: 'ri:align-justify',
                keepAlive: true
              }
            }
          ]
        },
        {
          path: 'menu3',
          name: 'NestedMenu3',
          component: '',
          meta: {
            title: 'menus.system.menu3',
            icon: 'ri:align-justify',
            keepAlive: true
          },
        }
      ]
    }
  ]
}

新建页面

你只需要在 /src/views/ 目录下创建一个页面，如：/src/views/safeguard/Server.vue

<template>
  <div class="page-content">
    <h1>test page</h1>
  </div>
</template>

tips：上面的例子中我们添加了一个页面，页面 class="page-content" 这个类名可以将盒子最小高度始终撑满屏幕剩余高度

路由注册

页面创建完成后需要注册路由才能访问页面

配置文件：src/router/routes/asyncRoutes.ts

一级路由（一级菜单）：

export const asyncRoutes: MenuListType[] = [
  {
    path: "/test/index",
    name: "Test",
    component: "/test/index",
    meta: {
      title: "测试页",
      keepAlive: true,
    },
  },
];

完成上面的步骤后就可以访问页面了

到这里路由添加完成，访问 http://localhost:3006/safeguard/server，如果能够正常访问，则表示路由和菜单定义成功。

多级路由（多级菜单）：

export const asyncRoutes: MenuListType[] = [
  {
    name: "Form",
    path: "/form",
    component: "/index/index",
    meta: {
      title: "表单",
      icon: "",
      keepAlive: false,
    },
    children: [
      {
        path: "basic",
        name: "Basic",
        component: "/form/basic",
        meta: {
          title: "基础表单",
          keepAlive: true,
        },
      },
      {
        path: "step",
        name: "Step",
        component: "/form/step",
        meta: {
          title: "分步表单",
          keepAlive: true,
        },
      },
    ],
  },
];

静态路由配置：

配置文件路径： src/router/routes/staticRoutes.ts

export const staticRoutes: AppRouteRecordRaw[] = [
  {
    path: "/test",
    name: "Test",
    component: () => import("@views/test/index.vue"),
    meta: { title: "测试页面", isHideTab: true, setTheme: true },
  },
];

配置完成后你可以访问：http://localhost:3006/#/test 查看新建的页面，到这里静态路由注册完成。 tips： 如果静态路由在动态路由表也配置了，需要把静态路由中的配置去除，因为动态路由会自动注册路由。

主页配置

通过配置 HOME_PAGE_PATH 属性可以定义主页路由，默认使用菜单第一个有效路径

配置文件路径：src/router/index.ts

export const HOME_PAGE_PATH = "";

内嵌页面配置

系统支持通过 iframe 内嵌外部页面，配置示例如下：

{
  path: '/outside/iframe/elementui',
  name: 'ElementUI',
  component: '',
  meta: {
    title: 'menus.widgets.elementUI',
    keepAlive: false,
    link: 'https://element-plus.org/zh-CN/component/overview.html',
    isIframe: true
  }
}