Programmatic Navigation

[00:00:00]
>> So for this next other part that I wanna cover with view router, which is a very common scenario is we want to talk about programmatic navigation. Because it's one thing to just click a link, but programmatically speaking, we need to be able to say, hey, when a user does this thing, check these things and then send them off to a specific page.

[00:00:18]
Very common. So wanted to make sure we actually covered that as well as dynamic route with params. So, if you take a look back inside of our playground and then let's go ahead and run that now. Rate, this is good, okay? Home to hide that playgrounds good. Hide this, so we don't get confused.

[00:00:41]
Great, okay, so at this point, what if we wanted to do something like when local count is greater than 200, it will go ahead and migrate them to Pokedex. That's like a basic chain that we could do. So how might that work? Well, if we look at our basic counter app, base, counter, there you go.

[00:01:03]
Here we go. Inside of here, this ones are not using script setup just yet. Do we have one that's already using script setup okay, that's only fine. Here's what we'll do. We will basically then do it inside of here just so that it's easier for people to read.

[00:01:17]
Okay, so inside of here, we're going to import that count that local count from our composable that we did earlier. So let me go ahead and grab this use count. And we're gonna drop it over here for our app, and then we say const. Count, store equals use count.

[00:01:37]
And then we can say, do, do, do, we can render out. Underneath here, the h2 that says, counts toward local count. So what did it not like this time to do, do do. Does it composable? All right, hold up. We just make sure we'll switch all this to the Alias to make our lives easier.

[00:01:59]
There you go. 50c file names, no longer routes. You don't have to worry about it anymore with that symbol. Great, okay? So we wanna do is we want to be able to say when the count goes to 50 or we increment it, right? Let's go ahead and actually check.

[00:02:14]
And if we want, we're gonna go ahead and navigate the user. So what we're going to do is we're going to import the watch helper method from view. So we're going to watch what? We're going to watch, count store that local count. And then what we get from this is a function where we get the value of it and I believe I can just do it like this.

[00:02:36]
So now to show that this works, we're going to go ahead. And we're going to go ahead and increment it anything increment count for this is a local one. So actually let's do global count just to make our lives a little bit easier here so global count, save.

[00:02:53]
So those are 200. We're going to increment global count here, it goes to 1200, and then your your 1200 on top. And you'll notice that our value is being printed out at the bottom as we would expect. So that's nice. So it's being watched. So what we want to say is that well, if value is greater than 1200, what do we want to do?

[00:03:13]
We want to navigate user to Pokedex. That's the pseudocode. How do we do that? Well, because we're inside of composition API. And to be honest, I think this is tends to be the easier way going forward to use with you libraries. And this way, we're gonna do it this way.

[00:03:28]
We're gonna go ahead and import something from the router. And so if in the options API for those from v2, you might remember something like this .router.push. That should look pretty familiar. But there is no this context inside of composition API. But what we do get though is we get helper methods.

[00:03:47]
Helper methods are basically the name of the game when it comes to view three. So from the view router, what do you think we called it? Well, it is use router because what are we doing? We're basically going to call the router. So how do we do that?

[00:04:01]
Const router = use router. So we're very explicit in what we're calling. And then here we can go router.push, what/Pokedex. So then we refresh this now, and we go ahead and go global global swapped to polka ds. That's it. That's programmatic navigation. Main thing being that, what do you do?

[00:04:24]
You make sure you get the router from view router that you can basically just like we did from the composable, it's a little helper method that says, hey, we're gonna help you do some stuff with the route. You instantiate it here on line 10, and then inside of either a watch or wherever you need to use it, it really is just router.push.

[00:04:41]
And the push semantics come from as well from I think the web history MDN. So again, we're not trying to reinvent the wheel here this should feel familiar.
>> There's a router now replace.
>> Yeah, there's replaced as well so if you go into the view router Doc's which again I highly recommend checking out when you start to dive into that stuff.

[00:04:57]
There's a ton of things that you can do in terms of programmatic navigation. So we see there's push, do do you can replace the location you can even use traversing history with the go. Again, we're not gonna play around with all this because this is something you can dive into as it makes sense.