The Link Component and Programmatic Linking

In This Lesson

We'll explore Inertia's Link component and its props. We'll then examine how to link between pages programmatically using Inertia's router.

Created by: @tomgobich
Published: 2 years ago

Join the Discussion 2 comments

@jean-louis

1 year ago

How can I make use of route identifiers ? Especially for programmatic linking.

Responding to jean-louis

@tomgobich

1 year ago

Hi Jean!

You can achieve that by using Tuyua! From it's documentation, once installed & configured it'll allow template & programmatic linking using route identifiers like the below:

<script setup lang="ts">
import { Link, useRouter } from '@tuyau/inertia/vue'

const router = useRouter()

function visit() {
  router.visit('users.posts.show', { id: 1, postId: 2 })
}
</script>

<template>
  <div>
    <Link route="users.posts.show" :params="{ id: 1, postId: 2 }">Go to post</Link>
    <button type="button" @click="visit">Go to posts</button>
  </div>
</template>
  
    
      Copied!
      
        
      
    
  
  
inertia
pages
Home.vue

Transcript

So let's take some time to actually understand what all of its capabilities are. We've already seen that it allows us to link from page to page in a manner where we don't
need to refresh all of the scripts needed to mount and actually render out our application, but rather just makes a XHR request for the new information and updates it accordingly.
If we were to jump back into our browser, this is the same browser session we were working with in the last lesson. If I hit back, we go back to our register, back again, and now we can see that we have a new XHR request.
go back to our register, back again, back to our login, so on and so forth for each of those requests that we made in the last lesson. If you want, however, a link click to not add to the page history,
rather than pushing to the state, which is the default behavior of the link, we can also replace that state whenever we click a link as well by just adding
a simple flag attribute called replace. So if we add that to our links on both pages, clicking the links between these pages should now never push to our state
and never update our back button inside of the browser. So if we open up a new browser, private session, localhost 3333, go to our login page, we click back, we just go back to the welcome page.
If we go forward, we go back to our application, click register, and now if we click back, there we are. We're back to the welcome page.
Awesome. So we are now replacing the state rather than pushing to it as expected. Go ahead and close that out. We're done with it.
These link components can also be used as post put patch and delete request submitters as well. So if we jump back into our routes file over here,
let's add in a post. So router.post to, and we'll leave our register on the right hand side, so we'll post to register over here. Do ctx and add in our route handler there.
What we'll do for this is just return ctx response, redirect back. So we'll just redirect right on back to our register page whenever we submit this.
So let's give this link here a copy and we'll paste it underneath our paragraph. Let's point this to our slash register endpoint with the goal of submitting to our post request
here. So if we want this to send out as a post rather than a get, we can just add in a method
attribute and specify it as post. And now Inertia will now send this request out as a literal post
request rather than a get request. So we can update the text here as well to post to slash register as that's literally what it is doing. Open our browser back up.
We need to go to our register page and here is our post to register. I'm going to go ahead and right click, open up our inspect panel and dive into the console.
We can give our post there a click and you'll see that it does a post request out to our register page and then a get because we're redirecting back to our register page. And we can verify that it
is actually redirecting via the 302 found right over there. Now if we were to click on this post request and take a look at the request data, currently it's not sending anything up but let's
say that maybe we wanted to send some data along with it. On our link we can add data via the data attribute and let's say maybe we want to send up an email and a password with it. Give that a save,
jump back into our browser, clear out our terminal and let's try giving that one more click. Let's check out the post request now and we can see that with our request we've now sent up an email
and a password matching the data that we've provided into the data attribute. Next let's say that this link that we're clicking to post to register is further down the page. So let's add
some space above all of this. So we'll just add in a div with a style and a height of maybe 100vh just to push it way down. Give that a save, jump back into our browser. Okay so now we need to
actually scroll down, you can see that right over here, to see the contents of our page. Clear out our terminal one more time and give our post to register another click and you'll see that we're right back
to having no content or so it appears. We've really just been scrolled back up. So if I scroll back down there, there's our content again. Give it a click, it just scrolls back up. What if we wanted
to preserve our scroll position whenever we do make that click so that we won't have to scroll back down and have a bunch of jumps as we click our actionable links? Well we can hide our browser
and on our link, let me go ahead and break that just so that it's a little bit more readable, there we go, and get rid of our data too. We're done with that. We can tell this to preserve our
scroll position by adding in a boolean attribute preserved scroll. Now whenever we click this link, it will save the current position of our scroll bar and plop us right back where we were. So if
we were to clear out our terminal, we still have that giant scroll going on. Let's click our link and we remain right where we are. We're no longer scrolled to the top of the page. Now if we take a
look at the actual element that's being used for this, you'll see that it's an anchor, but really we're using this as a button. If we wanted to be semantic with it, we can specify what element to
use for this link component by specifying an as attribute and we can plop in whatever element we
want to there. Since we're using this as more of a button, we'll do as button there, give that a save, jump back into our browser, and now you can see that this is an actual button rather than an
anchor element and it looks like the default positioning there wanted to center it up, but it's still there and whenever we click on it, so you can see if I jump into the console and click
on it here, we remain at our scroll position. Now if for any reason you needed this behavior programmatically accessible, so if you didn't have access to whatever it is that you needed to do
inside of your template, maybe it's inside of an event handler, you can make use of all of the same behavior that we've shown here with the link using Inertia's router as well. So if we now import
router, we have access to all of the same behavior. So I'll add in a function, say onClick, and let's add in a button underneath our link component. We'll use one of our ShotCN components
there for our button and we can do at click equals onClick, click me. All right, within our onClick now, we can make use of our router and let's say we wanted to traverse from our registry
page over to our login page. Well, we can do router.visit to change pages relatively easily. You'll see that we have a bunch of options throughout here. We can specify the href as a
simple option, but we also have method, data, replace, preserve scroll, preserve state, only, accept headers, error bags, force form data, so on and so forth, and it just goes on and on. You can
see the full argument set that you can accept there on the Inertia documentation. Just go to manual visits and it'll be there. For us, we just want to point to our login page, so we just add
slash login there, give that a save, jump back into our browser, scroll down a little bit more, and there's our click me button. If I give it a click, we jump over now to our login page,
jump back to our register, scroll back down, and you'll see the behavior is the exact same down here on our console as the link component for that. In addition to making get requests, we can also
do post, put, patch, delete, reload, replace, all of that fun stuff here as well. So if we wanted to
send out a post request to slash register, just as we're doing here with our link component, and if we wanted to send data, that would be here, so stuff there, and if we had some
additional options, that's the third argument, where if we wanted to preserve our scroll, we could specify that just like so, and now we have the exact same behavior as we saw with our link component
inside of an event handler right here. Jump back into our browser, let's give it a quick test. So let's click me, and there we go. We can see we preserved our scroll position, we didn't get
scrolled up, we sent out our post request to slash register, which redirected us back to our register page, and if we take a look at the get request, just like with normal visits, that redirection
just comes back with the page information needed for Inertia to update our rendered page. Again, if you would like to see the full option suite that you have for both the link and the router
within InertiaJS, just head to InertiaJS.com, scroll down, you have the link right here at links,
it goes over everything that you have, as well as manual visits, which goes over everything that you have available via the router, and you can see that you get event callbacks there at your disposal
as well. All right, before we round this lesson out, let's clean up our work a little bit, because a lot of the stuff we are done with. Let's get rid of this h1 as a whole, as well as the div pushing
all of our contents down, get rid of our click handler, get rid of our page, let's get rid of all of the props that we have here so far too, get rid of everything aside of that script, we'll leave the
script as we'll eventually need it, we get rid of our links, taking us back to just having the h1 in the paragraph linking between our login and register pages, and looks like we didn't do
anything with the login, so we're a-okay there. Let's also expand our file explorer back out, scroll up, jump into our inertia configuration, we don't need this shared globally anymore, collapse
our config back down, and we also don't need this share example middleware anymore either, so we can delete that all together, and whenever you're deleting router level or global level middleware,
we also need to jump down to our start kernel and delete it out of here too, get rid of that right hand side there, we're deleting right there out of our router.use, let's jump back into our browser,
make sure everything's still working a-okay, and whoops, I got rid of the link import, so that whole link right there went away, let's jump back into and give it a copy from here, and then jump into
our register page and paste that back inside of our script, just like so. All right, now we should be good, let's jump back into our browser and make sure, give it a refresh, jump between our pages,
okay cool, everything's working a-okay, and we're back to having a clean slate.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.