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

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通通不关怀，我只关怀写业务！