📄 前端组件路由管理

静态路由

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

在 PIGX-UI 中使用静态路由的主要原因： 适合配置系统级别的页面（如登录、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 标签页，同时也可以传递参数。

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

代码实现方式

① 菜单管理中定义隐藏菜单

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

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

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

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

const route = useRoute();

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

菜单参数方式

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

① 配置菜单 （带参）

指向 /admin/test/index 组件

AAA /admin/test/1

BBB /admin/test/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);
});