HTML5教程

rust+wasm写前端真香之路由

本文主要是介绍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就传递到子页面了,非常简单方便优雅。

这篇关于rust+wasm写前端真香之路由的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!