[sealer]是阿里巴巴开源的基于kuberentes的集群镜像开源技术,可以把整个集群整体打包。
Sealer Cloud可以在线化帮助用户进行集群打包分享和运行,Sealer cloud前后端也使用了非常先进的
rust+wasm技术实现。
本短文介绍前端路由部分的处理,链接跳转,参数传递等内容。
use yew_router::prelude::*; #[derive(Switch,Clone)] pub enum AppRoute { #[to = "/images/{name}"] ImageDetail(String), #[to = "/images"] Images } pub type Anchor = RouterAnchor<AppRoute>
我们这里有两个页面,一个images列表对应的URL是/images
,
另外一个image详情页面,对应的URL是/image/{name}
,
我们把image名称作为跳转的参数。
这里的Images和ImageDetail是我们之前定义的Model,不了解的翻我之前文章。
整个body中根据URL的不同展示不同的Model UI.
fn view(&self) -> Html { html! { <div> <Header /> <Router<AppRoute> render = Router::render(Self::switch) /> </div> } ...
switch函数决定挑战的逻辑:
fn switch(route: AppRoute) -> Html { match route { AppRoute::Images => html! { <Images /> }, AppRoute::ImageDetail(name)=> html! { <ImageDetail imageName=name /> } } }
非常简单优雅,不同的路由 match到不同的Model
AppRoute::ImageDetail(name)=> html! { <ImageDetail imageName=name /> }
可以看到这一条路由里尝试把参数传递给ImageDetail页面。
ImageDetail结构体需要去接收这个参数:
pub struct ImageDetail{ props: Props, } #[derive(Properties, Clone)] pub struct Props { pub imageName: String, // 这个名字与imageName=name对应 }
初始化的时候给它赋值:
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self { ImageDetail{ props, } }
然后我们就可以去使用它了:
fn view(&self) -> Html { html! { <div> { "this is image info" } { self.props.imageName.to_string() } </div> } }
imageList页面是如何跳转到ImageDetail页面的?
<Anchor route=AppRoute::ImageDetail(image.name.to_string())> <p> { image.name.to_string() } </p> </Anchor>
这样image name就传递到子页面了,非常简单方便优雅。