乐趣区

关于云计算:rustwasm写前端真香之路由

jiezi

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

具体的代码大家能够在如下材料中找到~

相干材料：

sealer cloud 前端源码

过程中遇到的问题
sealos 以 kubernetes 为内核的云操作系统发行版，让云原生简略遍及

laf 写代码像写博客一样简略，什么 docker kubernetes 通通不关怀，我只关怀写业务！

退出移动版