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 Special -> Routing group on the toolbox. Here are the basic steps to create a route to a component:
- Make sure that you have at least 1 custom component (your destination page) that should be under its own URL.
- Drop a new Router Outlet onto the design surface.
- Drop a new Router Link onto the design surface and give it some text.
- 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! Any 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 a hyperlink (or a button). This means that you can turn any hyperlink or button into a Router Link, by following these steps:
- Open the Details pane of the hyperlink or button.
- Find the "Directives" tab.
- From the dropdown, select Router link.
- The Router Link attributes appears in which you can choose the destination component.