We already saw how to programmatically direct a user to a specific route. We did that here on the protected page when redirecting the user after logout. This was all possible because of the push method exposed on the router. In this lesson, let's dig a little deeper into all the possibilities of programmatic navigation.
First, though, what's useful about it? Well, the difference with programmatic navigation is that you can perform route changes without the user clicking on a router link. This allows you to navigate at will based on anything at all, whether user behavior, some kind of time interval, the response from an AJAX request, or really any other trigger that you can think of. It also allows you to perform other tasks before or after the navigation, like in the case of our logout here.
All right, so that's why you'd want to use programmatic navigation. Now let's examine how it works. Just like with the router link, we could also pass in just the path here. And that would work just like before.
Another option for us though, would be to also provide a hash along with the name. That way, we'd be able to tell that the user came home from logging out. And while I don't have a specific use case in mind, this could be helpful in your applications. Let's see what that looks like now in the browser.
I'll go to the dashboard to log in, provide my username. And then once I hit log out, yeah, you'll notice in the URL that the hashtag log out is added to the end. Pretty cool. We could do a very similar thing, but with a query string instead of a hash.
That looks something like this. Providing null here for logout means that we'll get a query variable, logout, that excludes the equal sign and the values altogether. Sweet. push here are the same things that we can pass to the to attribute of a router link.
The reason for that is because under the hood, the router link actually just uses the push method. replace. The difference here is that dot replace doesn't add a new entry into the history stack. Instead, it replaces the current entry.
This has implications for the way the back and forward buttons behave. Let me show you what I mean by that. First, let's temporarily comment out line nineteen here to remove our requires off middleware from the equation. That way things are easier to see.
Okay, now we'll run things in the browser using dot replace to see how that works. I'll start on the home page. Then I'll go to the login page by clicking the dashboard link. I'll enter my username.
And then finally click log out. Cool. We're back to the home page as you'd probably expect. But now when I press the back button, we end up on the login page instead of the dashboard page.
That's because we replaced that history entry with our new one for the home page. Let's see the difference with Doc Push now. Okay, now over in the browser, I'll go through the same flow again. I'll start on the home page, go to the login page, and enter my login info, and then finally click log out.
Now this time when I press the back button we end up on the dashboard page. Cool. replace. replace can come in handy.
Lastly let's get our logout working again by uncommenting this line. In summary, you can use programmatic navigation whenever router link just won't do the trick. Plus, with programmatic navigation, you can also replace history entries instead of adding new ones.