中文

Router 配置

从 GenUI v0.1.2 开始，框架引入了路由配置功能。但需要注意的是，GenUI 的路由机制与传统 Web 前端中的“前端路由”是不同的概念。在 GUI 应用中并没有真正的 URL 路由，GenUI 的路由本质上是一种页面切换机制，用于在多个 UI 界面间进行状态管理和导航。

GenUI 的路由机制基于一个专用组件，并通过项目配置文件进行启用。你可以通过在 router.toml 中声明路由结构，并在 gen_ui.toml 中启用配置，再通过 route! 宏将其引入具体页面。

示例详见：

配置与使用流程

Step 1: 配置`router.toml`

你可以通过 router.toml 定义一个完整的路由配置，包括路由模式、默认激活页面、是否启用 Tabbar、页面路径等：

router.toml

1name = "MyRouter"
2id = "app_router"
3mode = "History"         # 可选值: History / Switch
4active = "login"         # 默认页面 ID
5
6[tabbar]
7theme = "Dark"
8active = false
9
10[tabbar.bars]
11login = { icon = "crate://self/resources/login.svg", text = "Login Page" }
12register = { icon = "crate://self/resources/register.svg", text = "Register Page" }
13
14[bar_pages]
15login = { path = "crate::views::login::*", component = "Login" }
16register = "crate::views::register::Register"
17
18[nav_pages]
19nav_about = { path = "crate::views::about::*", component = "About" }

Step 2: 在`gen_ui.toml` 中启用路由配置

gen_ui.toml

1[compiler]
2#...
3
4[makepad]
5router = "./router.toml"
6
7[plugins]
8#...

Step 3: 在组件中引入路由

在需要使用路由的 .gen 文件中，使用 route! 宏引入已声明的路由组件：

1<script>
2route!(app_router);
3</script>

WARNING

如果使用了 route! 宏，则该 .gen 文件不能包含其他元素，必须仅用于路由承载。

Step 4: 在其他组件中使用路由组件

你可以像使用普通组件一样，将路由组件嵌入到其他页面中：

1<template>
2  <component name="Home">
3    <view>
4      <button @clicked="to_page('login')"></button>
5    </view>
6    <MyRouter id="my_router"></MyRouter>
7  </component>
8</template>

使用路由作为根组件

如果希望以路由组件作为应用根组件，请在 root.gen 文件中使用 route! 宏。

此时 router.toml 中的 name 必须设置为 "UiRoot"，以保证编译器识别为主入口。

页面跳转操作

在父组件中控制跳转

你可以通过 c_ref! 宏获取路由实例，并调用其提供的方法：

1fn to_page(&mut self, page: &str) {
2    let mut my_router = c_ref!(my_router);
3
4    match page {
5        "login" => my_router.nav_to(id!(login)),
6        "register" => my_router.nav_to(id!(register)),
7        "about" => my_router.nav_to(id!(nav_about)),
8        "back" => my_router.nav_back(),
9        _ => {}
10    }
11}

在子组件中跳转

对于子组件，GenUI 提供了便捷的宏 nav_to! 和 nav_back! 用于处理跳转：

1pub fn to_register(&mut self) {
2    nav_to!(register);
3}
4
5pub fn back(&mut self) {
6    nav_back!();
7}

路由配置结构说明

Rust 中的数据结构定义：

1pub struct RouterBuilder {
2    pub name: String,
3    pub id: String,
4    pub mode: NavMode,
5    pub active: Option<String>,
6    pub tabbar: Option<TabbarBuilder>,
7    pub bar_pages: Vec<(String, Page)>,
8    pub nav_pages: HashMap<String, Page>,
9}
10
11pub struct TabbarBuilder {
12    pub theme: Option<Themes>,
13    pub active: bool,
14    pub bars: HashMap<String, TabbarItem>,
15}
16
17pub struct TabbarItem {
18    pub icon: Option<LiveDependency>,
19    pub text: Option<String>,
20}
21
22pub enum Page {
23    Path(Import),
24    Component { path: Import, component: String },
25}
26
27pub enum NavMode {
28    History,
29    Switch,
30}

字段说明表：

Key	类型	描述
`name`	`String`	路由组件名称
`id`	`String`	路由组件唯一标识
`mode`	`NavMode`	路由模式，支持 `History`（历史栈）与 `Switch`（切换模式）
`active`	`Option<String>`	默认激活的页面 ID
`tabbar`	`Option<TabbarBuilder>`	Tabbar 配置项（可选）
`bar_pages`	`Vec<(String, Page)>`	主要页面配置，支持组件指定
`nav_pages`	`HashMap<String, Page>`	次要页面配置，不显示在 Tabbar 中
`TabbarItem.icon`	`Option<LiveDependency>`	图标资源路径
`TabbarItem.text`	`Option<String>`	Tabbar 显示文本

#Router 配置

#配置与使用流程

#Step 1: 配置router.toml

#Step 2: 在gen_ui.toml 中启用路由配置

#Step 3: 在组件中引入路由

#Step 4: 在其他组件中使用路由组件

#使用路由作为根组件

#页面跳转操作

#在父组件中控制跳转

#在子组件中跳转

#路由配置结构说明

#Rust 中的数据结构定义：

#字段说明表：