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:
- Make sure that you have at least 1 custom component (your destination page) that should be under its own URL.
- Insert a new Router Outlet at the place where the page content should appear.
- 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.
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 extending it with the Router Link extension.