#Router configuration

Starting from GenUI v0.1.2, the framework has introduced the routing configuration function. However, it should be noted that GenUI's routing mechanism is different from the "front-end routing" in traditional Web front-ends. There is no real URL routing in GUI applications. GenUI's routing is essentially a page switching mechanism for state management and navigation between multiple UI interfaces.

GenUI's routing mechanism is based on a dedicated component and is enabled through the project configuration file. You can declare the routing structure in router.toml, enable the configuration in gen_ui.toml, and then introduce it to a specific page through the route! macro.

For more examples, see:

• Route component example
• Root route example

#Configuration and usage process

#Step 1: Configurerouter.toml

You can define a complete route configuration through router.toml, including route mode, default activation page, whether to enable Tabbar, page path, etc.:

1name = "MyRouter"
2id = "app_router"
3mode = "History" # Optional value: History / Switch
4active = "login" # Default page 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: Enable routing configuration ingen_ui.toml

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

#Step 3: Import routing in components

In the .gen file where routing is needed, use the route! macro to import the declared routing component:

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

#Step 4: Use the Router component in other components

You can embed the Router component in other pages just like using a normal component:

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>

#Use the Router as the root component

If you want to use the Router component as the root component of your application, use the route! macro in the root.gen file.

At this time, name in router.toml must be set to "UiRoot" to ensure that the compiler recognizes it as the main entry.

#Page jump operation

#Control jump in parent component

You can get the router instance through the c_ref! macro and call the method it provides:

1fn to_page(&mut self, page: &str) {
2let mut my_router = c_ref!(my_router);
3
4match 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}

#Jump in child component

For child components, GenUI provides convenient macros nav_to! and nav_back! to handle jumps:

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

#Routing configuration structure description

#Data structure definition in 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}

#Field description table: