Livewire 中文文档路由跳转
Many modern web applications are built as “single page applications” (SPAs). In these applications, each page rendered by the application no longer requires a full browser page reload, avoiding the overhead of re-downloading JavaScript and CSS assets on every request.
The alternative to a single page application is a multi-page application. In these applications, every time a user clicks a link, an entirely new HTML page is requested and rendered in the browser.
While most PHP applications have traditionally been multi-page applications, Livewire offers a single page application experience via a simple attribute you can add to links in your application: wire:navigate.
Basic usage
Let’s explore an example of using wire:navigate. Below is a typical Laravel routes file (routes/web.php) with three Livewire components defined as routes:
use App\Livewire\Dashboard;
use App\Livewire\ShowPosts;
use App\Livewire\ShowUsers;
Route::get('/', Dashboard::class);
Route::get('/posts', ShowPosts::class);
Route::get('/users', ShowUsers::class);By adding wire:navigate to each link in a navigation menu on each page, Livewire will prevent the standard handling of the link click and replace it with its own, faster version:
<nav>
<a href="/" wire:navigate>Dashboard</a>
<a href="/posts" wire:navigate>Posts</a>
<a href="/users" wire:navigate>Users</a>
</nav>Below is a breakdown of what happens when a wire:navigate link is clicked:
- User clicks a link
- Livewire prevents the browser from visiting the new page
- Instead, Livewire requests the page in the background and shows a loading bar at the top of the page
- When the HTML for the new page has been received, Livewire replaces the current page’s URL,
<title>tag and<body>contents with the elements from the new page
This technique results in much faster page load times — often twice as fast — and makes the application “feel” like a JavaScript powered single page application.
Redirects
When one of your Livewire components redirects users to another URL within your application, you can also instruct Livewire to use its wire:navigate functionality to load the new page. To accomplish this, provide the navigate argument to the redirect() method:
return $this->redirect('/posts', navigate: true);Now, instead of a full page request being used to redirect the user to the new URL, Livewire will replace the contents and URL of the current page with the new one.
Prefetching links
By default, Livewire includes a gentle strategy to prefetch pages before a user clicks on a link:
- A user presses down on their mouse button
- Livewire starts requesting the page
- They lift up on the mouse button to complete the click
- Livewire finishes the request and navigates to the new page
Surprisingly, the time between a user pressing down and lifting up on the mouse button is often enough time to load half or even an entire page from the server.
If you want an even more aggressive approach to prefetching, you may use the .hover modifier on a link:
<a href="/posts" wire:navigate.hover>Posts</a>The .hover modifier will instruct Livewire to prefetch the page after a user has hovered over the link for 60 milliseconds.
[!warning] Prefetching on hover increases server usage
Because not all users will click a link they hover over, adding.hoverwill request pages that may not be needed, though Livewire attempts to mitigate some of this overhead by waiting60milliseconds before prefetching the page.
Persisting elements across page visits
Sometimes, there are parts of a user interface that you need to persist between page loads, such as audio or video players. For example, in a podcasting application, a user may want to keep listening to an episode as they browse other pages.
You can achieve this in Livewire with the @persist directive.
By wrapping an element with @persist and providing it with a name, when a new page is requested using wire:navigate, Livewire will look for an element on the new page that has a matching @persist. Instead of replacing the element like normal, Livewire will use the existing DOM element from the previous page in the new page, preserving any state within the element.
Here is an example of an <audio> player element being persisted across pages using @persist:
@persist('player')
<audio src="{{ $episode->file }}" controls></audio>
@endpersistIf the above HTML appears on both pages — the current page, and the next one — the original element will be re-used on the new page. In the case of an audio player, the audio playback won’t be interrupted when navigating from one page to another.
Updating the page before navigating away
Livewire dispatches a useful event called livewire:navigating that allows you to execute JavaScript immediately BEFORE the current page is navigated away from.
This is useful for scenarios like modifying the contents of the current page before it is stored and reloaded as the back-button cache HTML.
document.addEventListener('livewire:navigating', () => {
// Mutate the HTML before the page is navigated away...
})Script evaluation
When navigating to a new page using wire:navigate, it feels like the browser has changed pages; however, from the browser’s perspective, you are technically still on the original page.
Because of this, styles and scripts are executed normally on the first page, but on subsequent pages, you may have to tweak the way you normally write JavaScript.
Here are a few caveats and scenarios you should be aware of when using wire:navigate.
Don’t rely on DOMContentLoaded
It’s common practice to place JavaScript inside a DOMContentLoaded event listener so that the code you want to run only executes after the page has fully loaded.
When using wire:navigate, DOMContentLoaded is only fired on the first page visit, not subsequent visits.
To run code on every page visit, swap every instance of DOMContentLoaded with livewire:navigated:
document.addEventListener('DOMContentLoaded', () => { // [tl! remove]
document.addEventListener('livewire:navigated', () => { // [tl! add]
// ...
})Now, any code placed inside this listener will be run on the initial page visit, and also after Livewire has finished navigating to subsequent pages.
Listening to this event is useful for things like initializing third-party libraries.
Scripts in <head> are loaded once
If two pages include the same <script> tag in the <head>, that script will only be run on the initial page visit and not on subsequent page visits.
<!-- Page one -->
<head>
<script src="/app.js"></script>
</head>
<!-- Page two -->
<head>
<script src="/app.js"></script>
</head>New <head> scripts are evaluated
If a subsequent page includes a new <script> tag in the <head> that was not present in the <head> of the initial page visit, Livewire will run the new <script> tag.
In the below example, page two includes a new JavaScript library for a third-party tool. When the user navigates to page two, that library will be evaluated.
<!-- Page one -->
<head>
<script src="/app.js"></script>
</head>
<!-- Page two -->
<head>
<script src="/app.js"></script>
<script src="/third-party.js"></script>
</head>Reloading when assets change
It’s common practice to include a version hash in an application’s main JavaScript file name. This ensures that after deploying a new version of your application, users will receive the fresh JavaScript asset, and not an old version served from the browser’s cache.
But, now that you are using wire:navigate and each page visit is no longer a fresh browser page load, your users may still be receiving stale JavaScript after deployments.
To prevent this, you may add data-navigate-track to a <script> tag in <head>:
<!-- Page one -->
<head>
<script src="/app.js?id=123" data-navigate-track></script>
</head>
<!-- Page two -->
<head>
<script src="/app.js?id=456" data-navigate-track></script>
</head>When a user visits page two, Livewire will detect a fresh JavaScript asset and trigger a full browser page reload.
If you are using Laravel’s Vite plug-in to bundle and serve your assets, Livewire adds data-navigate-track to the rendered HTML asset tags automatically. You can continue referencing your assets and scripts like normal:
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>Livewire will automatically inject data-navigate-track onto the rendered HTML tags.
[!warning] Only query string changes are tracked
Livewire will only reload a page if a[data-navigate-track]element’s query string (?id="456") changes, not the URI itself (/app.js).
Scripts in the <body> are re-evaluated
Because Livewire replaces the entire contents of the <body> on every new page, all <script> tags on the new page will be run:
<!-- Page one -->
<body>
<script>
console.log('Runs on page one')
</script>
</body>
<!-- Page two -->
<body>
<script>
console.log('Runs on page two')
</script>
</body>If you have a <script> tag in the body that you only want to be run once, you can add the data-navigate-once attribute to the <script> tag and Livewire will only run it on the initial page visit:
<script data-navigate-once>
console.log('Runs only on page one')
</script>
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：