本文へスキップ

ルーティング

ルートを宣言し、現在のウィンドウで一致した内容を描画し、push / replace で移動します。

#ルートの宣言

let router = Router::new(
    [
        RouteDefinition::new("home", "/"),
        RouteDefinition::new("project", "/projects/:id"),
    ],
    "/",
)?;

RouteDefinition::layout は、パスを持たない祖先を宣言します。相対の子パスは親と結合し、絶対の子パスはルートから始まります。

#入れ子のレイアウト

ルートの連鎖に一致させ、内側の内容をレイアウト要素で包みます。パスを持たないレイアウトは、URL セグメントを足さずに一致結果に現れます。

RouteDefinition::layout("shell").parent("root")

#ナビゲーション

self.router.push("/projects/42")?;
cx.invalidate();

コントローラーは push、replace、back、forward をサポートします。ナビゲーションはアプリ内に留まります。

#ルートパラメーター

if let Some(matched) = self.router.matched() {
    let id = matched
        .params()
        .iter()
        .find(|param| param.name() == "id")
        .map(|param| param.value())
        .unwrap_or("");
    text(format!("Project {id}"))
} else {
    text("Page not found")
}