00:03
but how do we go about linking from one page to another? Well, to get started with that within our routes file, let's go ahead and add in another route definition. So we already have one per register,
00:12
so let's add one now for lock-in. We'll do async, ctx, and add in our route handler.
00:18
For this, we'll have this return ctx inertia render auth slash lock-in. The props that we were passing in here within our routes file, were just for demonstration purposes. We'll be getting rid of that here momentarily.
00:28
So we'll leave that out of our log-in altogether here. We can give that a save, open up our file explorer, scroll down to where we have our pages, go into our auth directory,
00:36
and let's right-click in there and add a new file called login.vue. We hide our file explorer back away. We'll add in our template element, and let's go ahead and give this page a little header section.
00:46
So we'll do a div class flex, flex call, space, y2, and then we'll add in our template element. Div class flex, flex call, space, y2.
00:56
We'll add in an h1 to serve as our header. Text to xl font. We'll do semi-bold with tracking height, and the text for that will be log-in. Then underneath that, we'll have a paragraph
01:06
with a class text small, text muted foreground. This is one of the utility classes that ShodCM-Vue set up for us,
01:14
and this is where we'll want a link pointing to our register page, saying something like need an account register.
01:22
All right, let's give this file here a save and a copy, and I'm going to leave the placeholder stuff that we have here, but I'm also going to plop it into this template as well, just so that we have it over here,
01:31
with an anchor link pointing to our login page instead, and the text here would probably be have an account, and then point to login, and then the header text would instead be register.
01:41
All right, give that a save as well. With our server still running, let's go ahead and jump into our browser. I'll do a little refresh there, and here is our anchor link going to our login page,
01:50
and then back to our register page. So although everything looks good, we're actually not making use of Inertia the way that we're using it currently. If we go ahead and right-click our document and inspect, let's dive into the console.
02:00
Let's hide our errors, hide our logs, and hide our debug, and we're just going to leave XHR and request into our console logs here. We'll go ahead and click our login link now,
02:08
and you'll see that we do a full get request for slash login, and then all of our scripts come through. If we then click on our register link, you'll see that our page does a full get request
02:18
for our register, and then we reload all of our assets there too. The behavior that we would expect to see is that we would just do a get request for our new page, and all of our scripts would remain intact
02:28
and be reused for the new page that we're on. Instead, we're reloading our full app script, and Inertia is resetting, remounting our element, and everything. The reason it's behaving this way
02:38
is because we're using a literal anchor element. Now, just like with any client-side router system, Inertia 2 has its own router system that allows us to easily go from one page to another
02:47
using the full benefits of Inertia and our client application. So let's hide our browser away. For Inertia, this component is called link, and we can import it from Inertia view 3, just like so.
02:57
I'm gonna make this bar here a little bit more 50-50 between our login and register page, and then we'll want to replace our anchor element with that link component, just like so.
03:07
Let's go ahead and pop over to our login page now and do the exact same thing. So we'll add in a script, setup lang, and set the language to TS for TypeScript,
03:16
and then we can import link from at Inertia view 3. Jump down to our template and replace our anchor with the link, and give that a save.
03:26
And just like with the anchor elements, the link component also works with hrefs to point to our target destination. So we don't need to actually change the href attribute
03:34
as that is perfectly valid for the link component here. All right, with that change made, let's jump back into our browser now. Let's give the page a refresh so that we get a fresh console log. You can see it looks the exact same
03:43
as though we had clicked our anchor element prior to this change. We have our full register get request and all of our scripts needed to actually render out the page. Scroll back down to the bottom of our console there.
03:53
And now let's try clicking our new Inertia link component to see what happens. So you can see we click that, our page didn't do a refresh, and furthermore, we still see the old console statements
04:03
right here from our initial request to our register page, noting that we're now currently on our login page. If we scroll down, we see the get request
04:11
for our login page, but this is now an XHR request rather than a just straight get request, meaning that we're sending this out asynchronously, getting the result back,
04:21
and then Inertia is updating our page accordingly. If we were to click back to our register page, you see that happens once more. We get just an XHR. None of the scripts are reloading. Those are all just being reused
04:31
because we aren't actually reloading the page as a whole. If we were to take a look at our XHR get requests for the two pages that we went to, our login and register pages,
04:41
expand that out, take a look at the response, you'll see that this comes back with the updated component that we should use, the version, the props, as well as the URL that we are now at. So for our login page,
04:51
you can see that it came with our props that are being shared with that page. We have shared globally and shared from middleware there as well. Whereas if we scroll down and take a look at just our register page,
05:00
you can see that this is coming with shared globally, shared from middleware, the same as our login page, as these happen for each and every page that we have. And then we also have shared from rel,
05:09
which is shared directly from our rel handler. And it looks like we have one more there being truncated. Yep, stuff right there. So with inertia's link component, whenever we click on it,
05:17
it's really just going to send out a get request via XHR to the new page that we're requesting, and then it will return back just the information needed
05:25
to update our literal page for the request that we've made. And if you recall back to the previous lesson, whenever we were taking a look at the inertia page state and use page as a whole,
05:34
we jump back into our view dev tools, take a look at the inertia page state, you see the initial page looks exactly the same as the information that we're getting back from those XHR requests.
05:44
So inertia is using the information from those XHR requests to update the page information that it has to keep that in sync and update our page render. So if we compare what we have here
05:53
to what we have in our console, you'll see that they look relatively similar.
