Sealer is Alibaba’s open source Kuberentes-based cluster mirroring open source technology, which can package an entire cluster.

The Sealer Cloud is available online to help users cluster, package, share and run, and is implemented using rust+ WASM technology on the front and back ends.

This short article introduces the front-end routing part of the processing, link jump, parameter transfer and other content.

Define the routing

use yew_router::prelude::*;

#[derive(Switch,Clone)]
pub enum AppRoute {
    #[to = "/images/{name}"]
    ImageDetail(String),
    #[to = "/images"]
    Images
}

pub type Anchor = RouterAnchor<AppRoute>
Copy the code

We have two pages here, a list of images with the URL /images,

/image/{name} /image/{name}

We take the image name as the jump parameter.

The Images and the ImageDetail here are the models that we defined before, if you don’t know what I did in my previous post.

Match on the home page

Different Model UIs are displayed throughout the body depending on the URL.

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

Copy the code

The switch function determines the logic of the challenge:

fn switch(route: AppRoute) -> Html {
     match route {
         AppRoute::Images => html! { <Images /> },
         AppRoute::ImageDetail(name)=> html! { <ImageDetail imageName=name /> }
     }
 }
Copy the code

Very simple and elegant, different routes match to different models

Parameter passing

AppRoute::ImageDetail(name)=> html! { <ImageDetail imageName=name /> }
Copy the code

You can see that this route is trying to pass parameters to the ImageDetail page.

The ImageDetail structure needs to receive this parameter:

pub struct ImageDetail{ props: Props, } #[derive(Properties, Clone)] pub struct Props { pub imageName: String (imageName=name);Copy the code

Assign it a value when initializing:

fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
    ImageDetail{
        props,
    }
}
Copy the code

Then we can use it:

fn view(&self) -> Html {
    html! {
        <div>
        { "this is image info" }
        { self.props.imageName.to_string() }
        </div>
    }
}
Copy the code

Skip links

How does the imageList page jump to the ImageDetail page?

<Anchor route=AppRoute::ImageDetail(image.name.to_string())>
  <p>
    { image.name.to_string() }
  </p>
</Anchor>
Copy the code

So the image name is passed to the child page, very simple and elegant.

The detailed code can be found in the following data ~

Related information:

Sealer Cloud front-end source code

Problems encountered during kubernetes one-click installation

Sealer cluster in one package!