Now, while we're on the subject of links, another useful feature is the ability to preserve your scroll position. Let me show you what I mean. Why don't we visit our User component, and as an example down here in a div, let's simply render the current time. So I will say the current time is, and then we'll pass that through from the server side. This is mostly to show that we are fetching new data from the server, and Vue is reacting to the change in props. All right, so let's declare our prop, time, and that will be of type string. Now, the next step is to return to our routes file, and I can go ahead and get rid of sleep.

All right, so let's declare our prop, time, and that will be of type string. Now, the next step is to return to our routes file, and I can go ahead and get rid of sleep. But now, I'm going to pass through the current time, and for that, I can just use Carbon. So I can do something like now to time string, and that should be fine. Okay, so now this route will load the User's component and pass through the current time. Our Vue component will accept that time and then render it in this paragraph tag. So if we come back to Firefox, refresh, and visit the User's page, I can see the current time. And of course, every time I refresh, you'll see that bump up. Okay, but now, let's push it far down the page.

post. Anyways, when it performs that redirect, you probably don't want it to send you back to the top of the page. No, instead, you want that scroll position to remain unchanged. So we can do that in Inertia by adding the preserveScroll attribute. And that's all there is to it. So if I come back to Firefox, give it a refresh, and if I click on this link again, I want you to notice that the time will update, but the scroll bar will remain unchanged. There we go, 45, 46, 47. And do note, every single time I hit this link here, we are making an AJAX request.

of those filters. Instead, you want to maintain their current scroll position, and you do that by adding the preserveScroll attribute.