txz-mch-pay/doc/20.md

技术文档

打开导航菜单

PIG AI Guide

切换主题搜索

[](https://wwads.cn/click/bait)[ ](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)

🛒 B2B2C商家入驻平台系统java版 Java+vue+uniapp 功能强大 稳定 支持diy 方便二开广告

PIGX 技术指南

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

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端组件路由管理

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

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

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

本页导航

静态路由

路由配置位置

属性配置说明

动态路由

代码实现方式

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

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

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

菜单参数方式

① 配置菜单 （带参）

② 页面获取参数