路由

获取当前路由

pub fn current_route() -> String {
    let window: Window = window().expect("no global window exists");
    let hash: String = window.location().hash().unwrap_or_default();
    let route: String = hash.strip_prefix('#').unwrap_or(&hash).to_string();
    if route.is_empty() {
        "/".to_string()
    } else {
        route
    }
}

导航

pub fn navigate(route: &str) {
    let window: Window = window().expect("no global window exists");
    let location: Location = window.location();
    let new_hash: String = format!("#{}", route);
    let _ = location.set_hash(&new_hash);
}

路由匹配

let route_signal: Signal<String> = use_signal(current_route);
let route_updater: Signal<String> = route_signal;
let window: Window = window().expect("no global window exists");
let closure: Closure<dyn FnMut()> = Closure::wrap(Box::new(move || {
    let new_route: String = current_route();
    route_updater.set(new_route);
}));
window
    .add_event_listener_with_callback(
        &NativeEventName::HashChange.to_string(),
        closure.as_ref().unchecked_ref(),
    )
    .unwrap();
closure.forget();

rsx! {
    main {
        match {route_signal.get().as_str()} {
            "/" => { page_home() }
            "/list" => { page_list() }
            _ => { page_not_found() }
        }
    }
}

提示

euv 示例使用 hash 路由（#/path），修改 window.location.hash 即可切换页面。

加载中...