rust+wasm写前端真香之路由

[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就传递到子页面了，非常简单方便优雅。