This app highlights the power of Routify 3 in managing user authentication and securing routes.
The /signin and /signout routes handle the user authentication. Routify 3’s role is to redirect users based on their authentication status - post login or logout.
The /admin route showcases Routify 3’s capacity to secure routes. If an unauthenticated user attempts to access this private route, Routify’s load function triggers a redirection to the sign-in page.
An admin page using guard hooks.
This example demonstrates how to utilize the `load` hook to fetch and return data via a "props" object. Navigate to data.svelte to see how we retrieve data from a Star Wars API and make it accessible for our component.
prefetch data on hoverFetch data with the load hook before component render.
meta.history allows navigating between previous route states. Try click Revisit and then navigate back.
Using <slot inline={{params}} />, we can pass 4 city names. This will create 4 instances of inline-params/[city].
Implementing Inline Pages in Routify is straightforward and can be done in two ways:
In the Svelte component of the page you want to inline, add the following meta field:
<!-- routify:meta inline -->
Alternatively, you can add the 'inline' attribute to the slot element in the parent module:
<slot inline /> Either method tell Routify to treat the page as an Inline Page, loading its content alongside the other Inline Pages and preserving its state when navigating away. This makes for a seamless and efficient user experience!
A landing page showing inline pages.