Implementing routing

Routing is an essential concept in Single Page Applications. When using routing, each component is under its own URL, and the router uses the current URL to determine which component to display in a so-called router outlet (called 'router-view' in Vue.js).

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. Drop a new Router Outlet onto the design surface.
  3. Drop a new Router Link onto the design surface and give it some text.
  4. In the details pane, find the Router Link attributes tab and select one of the components from step 1 as Destination Component.

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

Note: most SPA frameworks require you to build a routing configuration. In JitBlox, you don't need to do this! All routing code (e.g. routing tables) is generated automatically based on conventions.

Other routing features

When you link to a component, you can pass parameters to the component using the route URL. The destination component can use this value as the input for an API call (see creating component properties for a how-to). When creating a Router Link, you can fill each component parameter in the Router Link attributes tab.

A router outlet can also have a default destination component. The default destination component is activated whenever the user has not clicked a specific router link yet.

A router link is actually just an extension to a hyperlink (or a button). This means that you can turn any hyperlink into a Router Link, by dropping a Router Link from the toolbox onto an existing hyperlink while you hold the Ctrl-key (Windows) or Option key (MacOS).