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

我们这里有两个页面,一个images列表对应的URL是/images,

另外一个image详情页面,对应的URL是/image/{name},

我们把image名称作为跳转的参数。

这里的Images和ImageDetail是我们之前定义的Model,不了解的翻我之前文章。

在主页面中进行匹配

整个body中根据URL的不同展示不同的Model UI.

fn view(&self) -> Html {
    html! {
        
render = Router::render(Self::switch) />
} ...

switch函数决定挑战的逻辑:

fn switch(route: AppRoute) -> Html {
     match route {
         AppRoute::Images => html! {  },
         AppRoute::ImageDetail(name)=> html! {  }
     }
 }

非常简单优雅,不同的路由 match到不同的Model

参数传递

AppRoute::ImageDetail(name)=> html! {  }

可以看到这一条路由里尝试把参数传递给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 {
    ImageDetail{
        props,
    }
}

然后我们就可以去使用它了:

fn view(&self) -> Html {
    html! {
        
{ "this is image info" } { self.props.imageName.to_string() }
} }

跳转链接

imageList页面是如何跳转到ImageDetail页面的?


  

{ image.name.to_string() }

这样image name就传递到子页面了,非常简单方便优雅。

详细的代码大家可以在如下资料中找到~

相关资料:

sealer cloud前端源码

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

laf 写代码像写博客一样简单,什么docker kubernetes统统不关心,我只关心写业务!

你可能感兴趣的:(云计算)