JLC Docs
PIG
AI
PIG
AI

前端组件路由管理

静态路由

静态路由是指直接在前端代码中配置的路由，不需要通过后端接口动态获取。这些路由在项目编译时就已确定，适用于固定不变的页面导航结构。

使用场景

静态路由适合配置系统级别的页面（如登录、404等），可以独立于后端菜单权限系统，不需要鉴权等配置。

路由配置位置

src/ └── router/ └── route.ts # 路由配置文件
路由配置文件位置

属性配置说明

路由配置项支持以下属性：

配置项说明
title菜单栏及 tagsView 栏、菜单搜索名称（支持国际化）
isLink是否超链接菜单，开启外链条件：1. isLink 链接地址不为空 2. isIframe 为 false
isHide是否隐藏此路由
isKeepAlive是否缓存组件状态
isAuth是否需要认证才能进入的页面
isAffix是否固定在 tagsView 栏上
isIframe是否内嵌窗口，开启条件：1. isIframe 为 true 2. isLink 链接地址不为空
icon菜单、tagsView 图标，阿里：加 iconfont xxx，fontawesome：加 fa xxx

动态路由

动态路由功能

点击页面上的按钮可以打开新的 Tagsview 标签页，同时也可以传递参数。

使用场景

以下是一个适用场景的例子，当点击"新增文章"按钮时，会打开一个新的发布文章页面，方便进行操作。

动态路由使用场景示例

代码实现方式

1. 菜单管理中定义隐藏菜单

权限配置

注意为角色分配该菜单的权限。

菜单管理配置示例

2. 点击目标按钮触发路由跳转

const click = () => {
  router.push({
    path: "/app/appArticle/form",
    query: { tagsViewName: "动态路由测试", param1: "123" },
  });
};

3. 在跳转的页面获取请求参数

const route = useRoute();

onMounted(() => {
  console.log(route.query.tagsViewName);
  console.log(route.query.param1);
});

菜单参数方式

同组件多菜单

在多个菜单中引用同一个路由下的组件，通过路由参数进行区分。

菜单参数配置示例

1. 配置菜单（带参）

指向 /admin/test/index 组件，通过路径参数区分不同菜单：

AAA /admin/test/1

BBB /admin/test/2
菜单配置详情

2. 页面获取参数

在 admin/test/index.vue 中获取路由参数：

const route = useRoute();

onMounted(() => {
  // test/index/参数
  const parts = route.path.split("/");
  const lastParam = parts[parts.length - 1];
  console.log(lastParam);
});
本页目录