技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/tCsMFF956EX0JzAB8kkMuGpAUwWcW7KoJnzN1fY5.jpg)
](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)

[🛒 B2B2C商家入驻平台系统java版 **Java+vue+uniapp** 功能强大 稳定 支持diy 方便二开](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端组件路由管理
========

[](#静态路由)静态路由
-------------

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

在 PIGX-UI 中使用静态路由的主要原因： 适合配置系统级别的页面（如登录、404等），可以独立于后端菜单权限系统 （不需要鉴权等配置）

### [](#路由配置位置)路由配置位置

```


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




```

![](https://minio.pigx.top/oss/202411/1730690892.png)

### [](#属性配置说明)属性配置说明

| 配置项 | 说明 |
| --- | --- |
| 

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 标签页，同时也可以传递参数。

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

![](https://minio.pigx.top/oss/202308/1692178174.png)

[](#代码实现方式)代码实现方式
-----------------

### [](#-菜单管理中定义隐藏菜单)① 菜单管理中定义隐藏菜单

警告

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

![](https://minio.pigx.top/oss/202308/1692178433.png)

### [](#-点击目标按钮触发路由跳转)② 点击目标按钮触发路由跳转

```


`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);  });`




```

[](#菜单参数方式)菜单参数方式
-----------------

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

![](https://minio.pigx.top/oss/202402/1709135366.png)

### [](#-配置菜单-带参)① 配置菜单 （带参）

指向 /admin/test/index 组件

```


`AAA /admin/test/1  
BBB /admin/test/2`




```

![](https://minio.pigx.top/oss/202402/1709182037.png)

### [](#-页面获取参数)② 页面获取参数

*   admin/test/index.vue

```


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




```

### 本页导航

静态路由

路由配置位置

属性配置说明

动态路由

代码实现方式

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

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

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

菜单参数方式

① 配置菜单 （带参）

② 页面获取参数