路由和菜单

路由和菜单是极为重要的，配置正确很关键，平台尽最大可能详细描述

# 路由和菜单配置

点击查看完整路由和菜单配置

interface RouteConfigsTable {
  // 路由路径
  path: string;
  // 路由名称（必须保持唯一）
  name: string;
  // 路由重定向（默认跳转地址）
  redirect: string;
  // 路由元信息，通俗来说就是路由上的额外信息 https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF
  meta: {
    // 菜单名称（兼容国际化、非国际化，如果用国际化的写法就必须在根目录的locales文件夹下对应添加）
    title: string;
    // 菜单图标
    icon: string | FunctionalComponent | IconifyIcon;
    // 是否在菜单中显示
    showLink: boolean;
    // 菜单排序，值越高排的越后（只针对顶级路由）
    rank: number;
  };
  // 子路由配置项
  children: [
    {
      // 路由路径
      path: string;
      // 路由名称（必须唯一并且和当前路由component字段对应的页面里用defineOptions包起来的name保持一致）
      name: string;
      // 路由重定向
      redirect: string;
      // 按需加载需要展示的页面
      component: RouteComponent;
      // 路由元信息
      meta: {
        // 菜单名称（兼容国际化、非国际化，如果用国际化的写法就必须在根目录的locales文件夹下对应添加）
        title: string;
        // 菜单图标
        icon: string | FunctionalComponent | IconifyIcon;
        // 菜单名称右侧的额外图标
        extraIcon: string | FunctionalComponent | IconifyIcon;
        // 是否显示该菜单
        showLink: boolean;
        // 是否显示父级菜单
        showParent: boolean;
        // 页面级别权限设置
        roles: Array<string>;
        // 按钮级别权限设置
        auths: Array<string>;
        // 是否缓存该路由页面（开启后，会保存该页面的整体状态，刷新后会清空状态）
        keepAlive: boolean;
        // 需要内嵌的iframe链接地址
        frameSrc: string;
        // 内嵌的iframe页面是否开启首次加载动画
        frameLoading: boolean;
        // 页面加载动画（两种模式，第二种权重更高，第一种直接采用vue内置的transitions动画，第二种是使用animate.css编写进、离场动画，平台更推荐使用第二种模式，已经内置了animate.css，直接写对应的动画名即可）
        transition: {
          // 当前页面动画，这里是第一种模式，比如 name: "fade" 更具体看后面链接 https://cn.vuejs.org/api/built-in-components.html#transition
          name: string;
          // 当前页面进场动画，这里是第二种模式，比如 enterTransition: "animate__fadeInLeft"
          enterTransition: string;
          // 当前页面离场动画，这里是第二种模式，比如 leaveTransition: "animate__fadeOutRight"
          leaveTransition: string;
        };
        // 当前菜单名称或自定义信息禁止添加到标签页
        hiddenTag: boolean;
        // 显示在标签页的最大数量，需满足后面的条件：不显示在菜单中的路由并且是通过query或params传参模式打开的页面。在完整版全局搜dynamicLevel即可查看代码演示
        dynamicLevel: number;
        // 将某个菜单激活（主要用于通过query或params传参的路由，当它们通过配置showLink: false后不在菜单中显示，就不会有任何菜单高亮，而通过设置activePath指定激活菜单即可获得高亮，activePath为指定激活菜单的path）
        activePath: string;
      };
    },
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# 静态路由

在前端代码里写上固定的路由即静态路由。平台支持任意层级菜单格式，下面列举最常用的菜单层级模式，更深层级按照下面格式即可

阅读前须知

一般来说一级菜单代表无任何子菜单的菜单，二级菜单代表一级菜单下面有子菜单，三级菜单代表二级菜单下面有子菜单以此类推

# 如何生成一级菜单

点击查看

比如我们要生成一个名为 加油 的菜单

新建 src/router/modules/fighting.ts 文件，加入如下代码

fighting.ts

// 最简代码，也就是这些字段必须有
export default {
  path: "/fighting",
  meta: {
    title: "加油"
  },
  children: [
    {
      path: "/fighting/index",
      name: "Fighting",
      component: () => import("@/views/fighting/index.vue"),
      meta: {
        title: "加油"
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

新建 src/views/fighting/index.vue 文件，加入如下代码

index.vue

<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Fighting"
});
</script>

<template>
  <h1>加油</h1>
</template>

1
2
3
4
5
6
7
8
9
10

上面所写代码如下图效果

# 如何生成二级菜单（两种模式）

# 第一种（该模式针对父级菜单下只有一个子菜单的情况，在子菜单的 `meta` 属性中加上 `showParent: true` 即可）

点击查看

// 最简代码，也就是这些字段必须有
export default {
  path: "/fighting",
  meta: {
    title: "励志"
  },
  children: [
    {
      path: "/fighting/index",
      name: "Fighting",
      component: () => import("@/views/fighting/index.vue"),
      meta: {
        title: "加油",
        // 通过设置showParent为true，显示父级
        showParent: true
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如下图效果

# 第二种（该模式针对父级菜单下有大于或等于两个子菜单的情况）

点击查看

// 最简代码，也就是这些字段必须有
export default {
  path: "/fighting",
  meta: {
    title: "励志"
  },
  children: [
    {
      path: "/fighting/index",
      name: "Fighting",
      component: () => import("@/views/fighting/index.vue"),
      meta: {
        title: "加油"
      }
    },
    {
      path: "/fighting/effort",
      name: "Effort",
      component: () => import("@/views/fighting/effort.vue"),
      meta: {
        title: "努力"
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

如下图效果

# 如何生成三级菜单（两种模式）

# 第一种（该模式针对父级菜单下只有一个子菜单的情况，在子菜单的 `meta` 属性中加上 `showParent: true` 即可）

点击查看

// 最简代码，也就是这些字段必须有
export default {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1",
          component: () => import("@/views/nested/menu1/menu1-1/index.vue"),
          name: "Menu1-1",
          meta: {
            title: "菜单1-1",
            // 通过设置showParent为true，显示父级
            showParent: true
          }
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

如下图效果

# 第二种（该模式针对父级菜单下有大于或等于两个子菜单的情况）

点击查看

// 最简代码，也就是这些字段必须有
export default {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1",
          component: () => import("@/views/nested/menu1/menu1-1/index.vue"),
          name: "Menu1-1",
          meta: {
            title: "菜单1-1"
          }
        },
        {
          path: "/nested/menu1/menu1-2",
          component: () => import("@/views/nested/menu1/menu1-2/index.vue"),
          name: "Menu1-2",
          meta: {
            title: "菜单1-2"
          }
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

如下图效果

# 如何生成四级菜单（两种模式）

# 第一种（该模式针对父级菜单下只有一个子菜单的情况，在子菜单的 `meta` 属性中加上 `showParent: true` 即可）

点击查看

// 最简代码，也就是这些字段必须有
export default {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1",
          meta: {
            title: "菜单1-1"
          },
          children: [
            {
              path: "/nested/menu1/menu1-1/menu1-1-1",
              component: () =>
                import("@/views/nested/menu1/menu1-1/menu1-1-1/index.vue"),
              name: "Menu1-1-1",
              meta: {
                title: "菜单1-1-1",
                // 通过设置showParent为true，显示父级
                showParent: true
              }
            }
          ]
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

如下图效果

# 第二种（该模式针对父级菜单下有大于或等于两个子菜单的情况）

点击查看

// 最简代码，也就是这些字段必须有
export default {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1",
          meta: {
            title: "菜单1-1"
          },
          children: [
            {
              path: "/nested/menu1/menu1-1/menu1-1-1",
              component: () =>
                import("@/views/nested/menu1/menu1-1/menu1-1-1/index.vue"),
              name: "Menu1-1-1",
              meta: {
                title: "菜单1-1-1"
              }
            },
            {
              path: "/nested/menu1/menu1-1/menu1-1-2",
              component: () =>
                import("@/views/nested/menu1/menu1-1/menu1-1-2/index.vue"),
              name: "Menu1-1-2",
              meta: {
                title: "菜单1-1-2"
              }
            }
          ]
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

如下图效果

# 注意点

# 国际化

只需要在路由 meta 的 title 字段中使用国际化写法即可，比如 title: "menus.hsabnormal"
这个 menus.hsabnormal 必须在 locales 文件夹下进行配置哦，如下图

# 重定向

可以看到上面生成菜单的路由配置项我并没有加上 redirect 属性，当使用 fighting 路径跳转时，就会跑到 404 页面

所以我们最好在写静态路由配置时将父级加上 redirect 属性，redirect 可以填写您想要重定向的 path 即可，具体可以参考 src/router/modules/nested.ts (opens new window)

# 类型提示

分两种

export default 后跟 {}，这也是最常用的一种，在路由的配置项最后加上 as RouteConfigsTable 即可获得类型提示，如下图

export default 后跟 []，在路由的配置项最后加上 as Array<RouteConfigsTable> 即可获得类型提示，如下图

您肯定想问 RouteConfigsTable 是哪里来的呢？

我在这呢，快快点我查看 😊 (opens new window)

# 添加无 `layout` 的页面

使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块，只需要展示业务内容模块
无 layout 页面也就相当于一个全屏空白页面，没有菜单导航以及额外模块

如何添加？

在 src/router/modules/remaining.ts 文件添加对应路由具体参考 (opens new window)
添加对应业务代码页面具体参考 (opens new window)

温馨提示

必须在 src/router/modules/remaining.ts 文件添加哦

# 禁止修改或删除的路由

src/router/modules 文件夹里的 home.ts、remaining.ts、error.ts 这三个文件不可修改或删除，因为平台的某些核心逻辑是根据这三个文件作处理

如果不想在页面显示，在顶级路由的 meta 属性加上 showLink: false 即可，如下图

# 如何只要静态路由

平台在登录时默认会走 getAsyncRoutes (opens new window) 接口请求后端返回的动态路由，默认用 mock (opens new window) 模拟返回，如果只要静态路由，按照下面两个步骤修改即可

在 src/views/login/index.vue 文件作如下改动

<script setup lang="ts">
import { setToken } from "@/utils/auth";
import { addPathMatch, getTopMenu } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";

const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      loading.value = true;
      setToken({
        username: "admin",
        roles: ["admin"],
        accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
      } as any);
      // 全部采取静态路由模式
      usePermissionStoreHook().handleWholeMenus([]);
      addPathMatch();
      router.push(getTopMenu(true).path);
      message("登录成功", { type: "success" });
      loading.value = false;
    }
  });
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在 src/router/index.ts 文件作如下改动

import { addPathMatch } from "./utils";

// 使用下面方法替换initRouter
usePermissionStoreHook().handleWholeMenus([]);
addPathMatch();
if (!useMultiTagsStoreHook().getMultiTagsCache) {
  const { path } = to;
  const route = findRouteByPath(path, router.options.routes[0].children);
  getTopMenu(true);
  // query、params模式路由传参数的标签页不在此处处理
  if (route && route.meta?.title) {
    if (isAllEmpty(route.parentId) && route.meta?.backstage) {
      // 此处为动态顶级路由（目录）
      const { path, name, meta } = route.children[0];
      useMultiTagsStoreHook().handleTags("push", {
        path,
        name,
        meta,
      });
    } else {
      const { path, name, meta } = route;
      useMultiTagsStoreHook().handleTags("push", {
        path,
        name,
        meta,
      });
    }
  }
}
// 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
if (isAllEmpty(to.name)) router.push(to.fullPath);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 动态路由

后端返回的路由即动态路由。平台支持任意层级菜单格式，下面列举最常用的菜单层级模式，更深层级按照下面格式即可

平台用 mock 模拟后端，下面举例也是用 mock 举例哦，当然和后端返回的路由格式是一模一样的

阅读前须知

后端传 path 或传 component，平台对这两种模式都做了兼容具体实现代码 1 (opens new window) 具体实现代码 2 (opens new window)

第一种：下面所有生成菜单例子中的 path 都有个规则：如果这个 path 对应的是实际业务 .vue 或 .tsx 代码，就必须跟实际业务 .vue 或 .tsx 代码路径保持一致

第二种：菜单的 component 对应实际业务 .vue 或 .tsx 代码路径，这时 path 可以随便写啦，但是前面必须有个 / ，比如 path: '/anything' （这种情况我只在如何生成一级菜单里举例，多级菜单写法类似）

点击查看具体实现代码逻辑解析

// 具体实现代码1高亮处解析：
// 将/src/views/文件里所有的.vue和.tsx文件塞进modulesRoutes变量
// 当然这里只匹配了`.vue`和`.tsx`，如果您想匹配别的在下面 {} 加上即可，记得用 , 分开
const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");

// 具体实现代码2高亮处解析：
// addAsyncRoutes函数作用为过滤后端传来的动态路由，重新生成规范路由，
// 先读取后端返回的所有路由，从中过滤出component和path字段，然后在modulesRoutesKeys中对应匹配，
// 如果对应路由同时匹配到component和path，优先以component为主，这样您的path路径就可以随便写啦，
// 如果匹配到path未匹配到component，path必须按上面提到的跟实际业务`.vue`或`.tsx`代码路径保持一致，
// 如果匹配到component未匹配到path或者两个都未匹配到，我想问问您咱能好好玩不😭
function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
  if (!arrRoutes || !arrRoutes.length) return;
  const modulesRoutesKeys = Object.keys(modulesRoutes);
  arrRoutes.forEach((v: RouteRecordRaw) => {
    // 将backstage属性加入meta，标识此路由为后端返回路由
    v.meta.backstage = true;
    // 父级的redirect属性取值：如果子级存在且父级的redirect属性不存在，默认取第一个子级的path；如果子级存在且父级的redirect属性存在，取存在的redirect属性，会覆盖默认值
    if (v?.children && v.children.length && !v.redirect)
      v.redirect = v.children[0].path;
    // 父级的name属性取值：如果子级存在且父级的name属性不存在，默认取第一个子级的name；如果子级存在且父级的name属性存在，取存在的name属性，会覆盖默认值（注意：测试中发现父级的name不能和子级name重复，如果重复会造成重定向无效（跳转404），所以这里给父级的name起名的时候后面会自动加上`Parent`，避免重复）
    if (v?.children && v.children.length && !v.name)
      v.name = (v.children[0].name as string) + "Parent";
    if (v.meta?.frameSrc) {
      v.component = IFrame;
    } else {
      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会跟path保持一致）
      const index = v?.component
        ? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
      v.component = modulesRoutes[modulesRoutesKeys[index]];
    }
    if (v?.children && v.children.length) {
      addAsyncRoutes(v.children);
    }
  });
  return arrRoutes;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 如何生成一级菜单

# 只传 `path` 模式

点击查看

比如我们要生成一个名为 加油 的菜单

来到 mock/asyncRoutes.ts 文件，加入如下代码

asyncRoutes.ts

// 最简代码，也就是这些字段必须有
const fightingRouter = {
  path: "/fighting",
  meta: {
    title: "加油"
  },
  children: [
    {
      path: "/fighting/index",
      name: "Fighting",
      meta: {
        title: "加油"
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

新建 src/views/fighting/index.vue 文件，加入如下代码

index.vue

<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Fighting"
});
</script>

<template>
  <h1>加油</h1>
</template>

1
2
3
4
5
6
7
8
9
10

上面所写代码如下图效果

# 传 `path` 和 `component` 模式

点击查看

比如我们要生成一个名为 加油 的菜单

来到 mock/asyncRoutes.ts 文件，加入如下代码

asyncRoutes.ts

// 最简代码，也就是这些字段必须有
const fightingRouter = {
  path: "/fighting",
  meta: {
    title: "加油"
  },
  children: [
    {
      // path随便写，但前面必须有个 `/`
      path: "/anything",
      // component对应的值前不需要加 / 值对应的是实际业务 `.vue` 或 `.tsx` 代码路径
      component: "fighting/index",
      name: "Fighting",
      meta: {
        title: "加油"
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

新建 src/views/fighting/index.vue 文件，加入如下代码

index.vue

<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Fighting"
});
</script>

<template>
  <h1>加油</h1>
</template>

1
2
3
4
5
6
7
8
9
10

上面所写代码如下图效果

猜您可能有这种想法 🤔️

# 如何生成二级菜单（两种模式）

# 第一种（该模式针对父级菜单下只有一个子菜单的情况，在子菜单的 `meta` 属性中加上 `showParent: true` 即可）

点击查看

// 最简代码，也就是这些字段必须有
const fightingRouter = {
  path: "/fighting",
  meta: {
    title: "励志"
  },
  children: [
    {
      path: "/fighting/index",
      name: "Fighting",
      meta: {
        title: "加油",
        // 通过设置showParent为true，显示父级
        showParent: true
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如下图效果

# 第二种（该模式针对父级菜单下有大于或等于两个子菜单的情况）

点击查看

// 最简代码，也就是这些字段必须有
const fightingRouter = {
  path: "/fighting",
  meta: {
    title: "励志"
  },
  children: [
    {
      path: "/fighting/index",
      name: "Fighting",
      meta: {
        title: "加油"
      }
    },
    {
      path: "/fighting/effort",
      name: "Effort",
      meta: {
        title: "努力"
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如下图效果

# 如何生成三级菜单（两种模式）

# 第一种（该模式针对父级菜单下只有一个子菜单的情况，在子菜单的 `meta` 属性中加上 `showParent: true` 即可）

点击查看

// 最简代码，也就是这些字段必须有
const nestedRouter = {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1/index",
          name: "Menu1-1",
          meta: {
            title: "菜单1-1",
            // 通过设置showParent为true，显示父级
            showParent: true
          }
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

如下图效果

# 第二种（该模式针对父级菜单下有大于或等于两个子菜单的情况）

点击查看

// 最简代码，也就是这些字段必须有
const nestedRouter = {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1/index",
          name: "Menu1-1",
          meta: {
            title: "菜单1-1"
          }
        },
        {
          path: "/nested/menu1/menu1-2/index",
          name: "Menu1-2",
          meta: {
            title: "菜单1-2"
          }
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

如下图效果

# 如何生成四级菜单（两种模式）

# 第一种（该模式针对父级菜单下只有一个子菜单的情况，在子菜单的 `meta` 属性中加上 `showParent: true` 即可）

点击查看

// 最简代码，也就是这些字段必须有
const nestedRouter = {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1",
          meta: {
            title: "菜单1-1"
          },
          children: [
            {
              path: "/nested/menu1/menu1-1/menu1-1-1/index",
              name: "Menu1-1-1",
              meta: {
                title: "菜单1-1-1",
                // 通过设置showParent为true，显示父级
                showParent: true
              }
            }
          ]
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

如下图效果

# 第二种（该模式针对父级菜单下有大于或等于两个子菜单的情况）

点击查看

// 最简代码，也就是这些字段必须有
const nestedRouter = {
  path: "/nested",
  meta: {
    title: "多级菜单"
  },
  children: [
    {
      path: "/nested/menu1",
      meta: {
        title: "菜单1"
      },
      children: [
        {
          path: "/nested/menu1/menu1-1",
          meta: {
            title: "菜单1-1"
          },
          children: [
            {
              path: "/nested/menu1/menu1-1/menu1-1-1/index",
              name: "Menu1-1-1",
              meta: {
                title: "菜单1-1-1"
              }
            },
            {
              path: "/nested/menu1/menu1-1/menu1-1-2/index",
              name: "Menu1-1-2",
              meta: {
                title: "菜单1-1-2"
              }
            }
          ]
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

如下图效果

# 注意点

# 动态路由缓存本地

平台在 v3.9.7 版本默认关闭 CachingAsyncRoutes 动态路由缓存本地 (opens new window) 使其在开发环境下调试更方便，不用每次修改动态路由都要先清空本地缓存的动态路由，更推荐在生产环境开启

开启动态路由缓存本地后会优先读取本地缓存的路由点击查看具体实现代码 (opens new window) 如果您在开发环境下开启，每次修改动态路由都需要先清空 async-routes 这个键名的 sessionStorage 点击查看参考代码 (opens new window)

# 国际化

只需要在路由 meta 的 title 字段中使用国际化写法即可，比如 title: "menus.hssysManagement"
这个 menus.hssysManagement 必须在 locales 文件夹下进行配置哦，如下图

# 重定向

动态路由无需填写 redirect 重定向属性平台自动处理，逻辑为：如果子级存在且父级的 redirect 属性不存在，默认取第一个子级的 path 作为父级的 redirect

当然您也可以指定父级的 redirect 重定向属性，平台监测到存在指定父级的 redirect 后，会取指定的属性

点击查看具体实现代码 (opens new window)

# 重置路由

平台的重置路由功能只针对动态路由

# 常用场景

用户切换角色或退出登录时需调用重置路由功能，将路由和菜单恢复到初始化状态

# 基础用法

import { resetRouter } from "@/router";

resetRouter();

1
2
3

# 具体实现代码

点击查看具体实现代码 (opens new window)

# 静态路由、动态路由相同的配置

下面以动态路由返回举例，静态路由也是相同的配置，区别是静态路由需写在 src/router/modules 里

# 内嵌 `iframe` 和外链

点击查看

读重点：内嵌 iframe 将地址写进 frameSrc 属性里；外链将地址写进 name 属性里
具体代码实现：内嵌 iframe (opens new window) 外链 (opens new window)

// 最简代码，也就是这些字段必须有
const frameRouter = {
  path: "/iframe",
  meta: {
    title: "内嵌 iframe 和外链"
  },
  children: [
    // 内嵌 iframe
    {
      path: "/iframe/pure",
      // name必须写，写法随意
      name: "anything",
      meta: {
        title: "内嵌 iframe",
        // 需要内嵌页面的地址
        frameSrc: "https://pure-admin.cn",
        // 内嵌的iframe页面是否开启首次加载动画，默认true，下面可以不写，如果内嵌的iframe页面已经存在首加载动画，可以将frameLoading设为false
        // frameLoading: true
      }
    },
    // 外链
    {
      // path必须写，必须以 / 开头，推荐格式 / 后跟随意单词，不同的外链path不要重复哦
      path: "/anything",
      // 外链地址写在name属性里
      name: "https://pure-admin.cn",
      meta: {
        title: " 外链"
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

如下图效果

# 菜单排序 `rank`

在路由的 meta 里加入 rank 字段即可对菜单进行排序，rank 可不写、可为 null、可为 undefined、可为空值，但是平台推荐 rank 最好加上，对菜单进行有序排列使其看起来整齐，而且还能通过排序把您想要第一眼看到的菜单放到最前面

点击查看具体实现代码 (opens new window)

温馨提示

菜单排序 rank 只对顶级菜单生效点击查看为何如此设计 (opens new window)

# 菜单图标 `icon`

点击查看如何配置菜单图标

# 路由页面缓存 `keepAlive`

在路由的 meta 里加入 keepAlive: true 即可对当前路由页面进行缓存，被缓存的路由页面不会被销毁

生效前提：对应页面 name 必须与路由的 name 保持一致

虽然 vue-router 官方只支持到二级 keep-alive 缓存，但平台对路由进行了处理 (opens new window)，只要对当前路由设置了 keepAlive: true，并且对应的页面 name 与路由的 name 保持一致，不管层级多深都会支持 keep-alive 缓存

# 页面进场、离场动画定制化 `transition`

在路由的 meta 里加入下面代码即可定制化单个页面进场、离场动画，平台内置了 Animate.css ，所以您直接在 Animate.css (opens new window) 最右侧复制所需动画即可

transition: {
  // 页面进场动画
  enterTransition: "animate__fadeInRight",
  // 页面离场动画
  leaveTransition: "animate__fadeOutDown"
}

1
2
3
4
5
6

点击查看具体实现代码 (opens new window)

# 页面和按钮级别权限设置

平台内置 RBAC 权限模式，无论静态还是动态路由，配置都会生效，点击查看具体 RBAC 权限讲解

# 常见疑问

# 为什么路由的 `name` 必写，而且必须唯一

没有硬编码的 URL ；params 的自动编码/解码；防止在 url 中出现打字错误；绕过路径排序（如显示一个）点击了解具体 (opens new window)
虽然跳转路由有很多方式，但平台只推荐使用 name 跳转，如下面写法。优点：一是写法简单，尤其当 path 稍长时优点更突出，因为 name 只有一个单词；二是规范统一，都用 name 跳转也方便维护。尤其当项目过大时对整体维护起关键作用

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
router.push({ name: 'Fighting' })
</script>

1
2
3
4
5
6

平台的某些关键模块（路由模块、标签模块等）都依赖 name，所以独一无二的 name 对平台的稳定性起关键作用

# 为什么路由的 `name` 需和页面的 `name` 保持一致？

正常情况下这并不是硬性要求，而是一种规范，方便维护查找，通过路由 name 全局搜索即可知道对应页面代码位置，通过页面对应的 name 也可知道其对应哪个路由

当然，如果当前路由页面需要路由页面缓存 keepAlive 就必须保持一致

# 更多路由跳转示例代码

点击查看示例代码 (opens new window)

效果如下

上次更新: 2025/05/09, 02:23:01

← 布局 http请求→

路由和菜单