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:

component extends="cbwire.models.Component" {
    function renderIt() {
        return template("navigation");
    }
}

In your navigation view file (navigation.cfm):

<nav>
    <a href="/" wire:navigate>Dashboard</a>
    <a href="/posts" wire:navigate>Posts</a>
    <a href="/users" wire:navigate>Users</a>
</nav>

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.

<a href="/" wire:navigate.hover>Dashboard</a>

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.