wire:navigate
The wire:navigate directive in CBWIRE enhances user experience by facilitating faster and smoother page transitions, akin to a SPA-like experience. This directive intercepts standard navigation events and handles them asynchronously, reducing full-page reloads.
To utilize wire:navigate, add it to any link in your application where you want to enable dynamic content loading without refreshing the page.
Example: Navigation Bar with Dynamic Page Loading
Consider a navigation bar where clicking on links loads content dynamically:
In your navigation view file (navigation.cfm):
In this setup, clicking on the links will trigger CBWIRE to fetch the corresponding page content in the background and seamlessly swap it with the current content, thus avoiding a full page reload.
Prefetching Pages On Hover
CBWIRE supports prefetching content to enhance responsiveness when a user hovers over a link. This ensures the content is already loaded when the user clicks, making the navigation even faster.
By adding the .hover modifier to wire:navigate, the content for the Dashboard page is prefetched when the user hovers over the link, reducing load time upon click.
Last updated