This content originally appeared on Level Up Coding - Medium and was authored by Daniel Haven
Those who use Inertia as often as I do understand that it has a powerful “Link” component that allows you to give you app a single-page application feel while keeping it server-side rendered.
What’s not so obvious from the documentation is that one can actually utilize the Link component programmatically! As in, instead of wrapping whatever component you’re using as a link between <Link></Link>, you can actually get to a different page, SPA-style, using events.
Introducing “$inertia.get”
Before having this knowledge bestowed onto you, your code probably looked something like this:
<Link href="/link">
<button>Link</button>
</Link>
How about we rewrite it like this:
<button @click="$inertia.get('/link')">Link</button>Doesn’t that look cleaner? The two code snippets achieve the same effect, but the second one is shorter.
One minor disadvantage you would have with the second is that it would not function as a real link, so there would be no link showing at the bottom-left end of the page when the user hovers over the button. If you’re not into that, then I would still use the first code snippet.
But, then again, the obvious advantage is shorter, cleaner code! Who doesn’t love that?
Inertia: The “Link” Component & Programmatic Linking was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Daniel Haven
Daniel Haven | Sciencx (2022-05-04T11:44:07+00:00) Inertia: The “Link” Component & Programmatic Linking. Retrieved from https://www.scien.cx/2022/05/04/inertia-the-link-component-programmatic-linking/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.