Implementing routing

Routing takes care of navigation between pages. In component-based web apps, a page is basically nothing but a component with its own URL. Technically, routing is a bit more elaborate, but to use routing in JitBlox you only need to know two dedicated components: the Router Link and the Router Outlet (called 'router-view' in Vue.js). The following example shows both components working together.

1. The root (App) component of the application contains the main layout (a header and footer, which are the same regardless of which page the user is on).
2. In the middle of the main layout is a Router Outlet: this is where the content of the active page is being displayed.
3. The header contains two Router Links, which, when clicked by the user, cause the corresponding “page” to be displayed in the Router Outlet. We're putting “page” in quotes, because a page is just a custom component like any other.

You may be wondering why “Router Link” is shown inside square brackets [...]. This is because Router Link is a so-called extension added to a regular hyperlink. Don't let this distract you though, you add a router link in the same way as any other widget. Read more about extensions in adding features to existing elements.

Creating a new route

Implementing routing in JitBlox is dead simple. You will find the routing components in the Navigation group on the toolbox. Here are the basic steps to create a route to a component:

1. Make sure that you have at least 1 custom component (your destination page) that should be under its own URL.
2. Insert a new Router Outlet at the place where the page content should appear.
3. Insert a new Router Link, give it some text and choose the component from the first step as the Destination Component.

That's all there is to it. Repeat these steps for all other routes you would like to add.

Most web frameworks require developers to build a separate routing configuration. In JitBlox, this is not needed! All the underlying routing code (e.g. routing tables) is already taken care of.

Using route parameters

If a destination component requires variable input, you may also want to pass this input using a URL parameter. For example, you want to include a customerIdParam parameter in the routing URL, which the destination component can pass as an argument to an API call.

Using route parameters requires two steps: configuring the destination component and configuring the Router Link.

1. Configuring the destination component

1. Create a route parameter: Open the Route Parameters panel to the left of the template editor (use the input button). Then click the plus icon to add the new parameter.
2. Connect the route parameter to a component property: Make sure your component has a property to which you can assign the parameter value, for example, customerId. In doing so, choose “A route parameter” as the data source (see creating component properties for a how-to) and select the parameter created in the previous step.

For technical reasons, a route parameter can only have a simple (primitive) data type such as a string or integer: only primitive types can be included in a URL.

2. Configuring the Router Link

1. Open the properties of the Router Link and find the "parameters" attribute.
2. Notice the customerIdParam created in the previous step.
3. Click the customerIdParam and assign it a value. In the example below, we assigned it a static value of 12345, but you can also assign a data-bound value.

Customizing the route path

JitBlox automatically makes the route URL (“customer-details” in the above example) the same as the name of the destination component. However, you can also customize it: you do so in the component info tab to the left of the template editor.