🚨 Disclaimer: Routify 3 is currently in Release Candidate stage.
Please be aware that while the documentation is comprehensive, it may contain inaccuracies or errors. The codebase is also subject to changes that could affect functionality. We appreciate your understanding and welcome any feedback or contributions.
guide
Concepts
Preloading
Preloading happens in the module script (<script context="module">) and runs before the component is loaded.
It can be used for anything that needs to happen before the component is loaded, eg. fetching data or protecting pages.
Prefetching props
Prefetching data by using a props field.
Guard / redirect
Protected and redirecting from pages by using a redirect field.
preloading on hover
You can also optimize user experience by prefetching data on hover. Add the `data-routify-prefetch-data=“hover”“ attribute to an anchor element. This triggers data prefetching when the user hovers over the link.
<a href="/next-page" data-routify-prefetch-data="hover">Next Page</a>This enables quicker page loads by initiating data fetching even before the user clicks the link.