Dynamic Routing Exercise

[00:00:00]
>> What I want you to do is on sailor view, go ahead and the user page, we had a bunch of users. Go ahead and just make those links that you can click so you can go to their specific ID, and then show that users basically data. And don't worry about the nested routes bonus, but I mean, if you happen to have the time, feel free to check that out.

[00:00:19]
The other part of the exercise I totally forgot is that you know, there's a login page. Basically, what I want you to do is just check to make sure that the user types an email in there, just something basic, you don't need a full regex thing. Maybe check that the characters are greater than three and includes an at symbol.

[00:00:33]
And if that happens, then when they click login, allow the user to navigate over to another page. So whether you want to navigate to the Users page. Practice that programmatic navigation. So the way this is gonna work is we're gonna go inside of our cest-la-vue. I keep messing that up actually, cd cest-la-vue, and then run dev.

[00:00:56]
Looks like we're good. And then inside of Chrome, boom, there we are. 74 I just realized cuz I have to running, great. Okay, so the exercise here was go into the login, and I started by programmatically navigating it somewhere. So inside of our source, inside of our views, we're gonna look at our login page.

[00:01:17]
And all right, we're just basically gonna do a quick check to make sure we actually have an email. So again, we're not doing anything too fancy here. We're just going to v-model to something called as user, or as the emailInput. That's what I'll call it. And so import a ref from view because this is something we want to track.

[00:01:33]
And so we'll say const emailInput = ref that is an empty string by default. So to show that this works, though, I'll do 123, you'll notice that it does populate up. So that's fine we know that it's working. The thing we need to check though is that when the user clicks here, and we'll call this login, so const login.

[00:01:53]
We need to actually make sure that email input actually has the thing, right? So log(test), whoops, not test. So we'll log(emailInput.value). And so to show what I mean by this is we can see here if I go then at ben@ben, then we can Continue with email you'll see that that is actually being rendered out as expected.

[00:02:13]
Okay, great, so now all we need to do is just do a simple check to say if email.Input.value, let's say, so this is a string, right? So I think we actually can do that includes an @ symbol and the emailInput.value.length > 3. We'll just keep the logic symbol here.

[00:02:35]
Then we'll say Valid User else log Invalid User. Okay, let's see if that works. We have test, nothing's working @, nothing is working, why? Because while we didn't click on anything. There you go, that's a Valid ser. If we just do test Invalid User cuz there's no @ symbol.

[00:03:00]
But then we just do @ by itself also Invalid User. Okay, easy enough as an email test. Again, just so you know this is not production great quality, email validation just know that this is just for demo purposes. We have a valid user so what do we wanna do?

[00:03:14]
We wanna navigate our users to a page. How do we do that? Well, let's go ahead and import or useRouter from vue-router. Then we will go ahead and construct it by calling it our router using useRouter. And then, all we need to do is inside here, we'll just leave the console.log cuz that's nice to have for now.

[00:03:35]
If you router.push, let's go to user, just like that. It's a, whoops, something is not happy, what's going on? Well, I have typos up here at the top, that's what's wrong. Let's save here, much better. Okay, so we do the t, and then we Continue with email. Nothing is happening, great.

[00:03:52]
Test@email.com, Continue with email. Look at that, programmatic navigation. Easy peasy with the composition API in that we imported it, used the router to set it up, and then we just pushed the user once we had fulfilled our logic for the app. Okay, the final thing that we need to do is that we need the user to be able to actually look at different things.

[00:04:15]
So when we click on it, they'll actually be able to at least see user 1, user 2. Or in this case, we actually might even just wanna show their name. Let's do that. So the way we might do that is we'll go inside of our routes. So I think it's, currently we're managing it inside of here.

[00:04:29]
That's totally fine. So we'll basically create a user page. Looks like it didn't use names that quite well. So what I'm gonna do for now just to make it a little bit easier is I'm gonna call it UserDetailPage. But you should note that user page is slightly semantically inaccurate.

[00:04:47]
So the h1 here will be our user. So I'll just say user name so it's easy to see that we switch pages. And then we have our path to /user/, and then this time we'll call the variable name instead of ID to show you how that works. component we'll import what?

[00:05:08]
We'll import /vue/ UserDetailPage.vue, Save. Okay to show that this works, we'll go inside of our user page. And inside of each of these loops rather than just having the card here what we're gonna do is we're gonna actually wrap it here inside of a router link to it And so the router card we'll just go inside of our router link.

[00:05:36]
And where we're gonna route it to is gonna be a JavaScript, we gonna dynamically bind this one cuz we need to dynamically create it, which is gonna be /user/. And then we'll do the basically user.name. This might be a little bit tricky though cuz I know there's spaces in here.

[00:05:52]
Okay, so if we refresh this, did not like that, user, right cuz the loop is in here. So my mistake we actually cannot do it at this level, at least the way it's currently architected I would need to actually go inside of user card in order to actually do this.

[00:06:08]
So inside of here is where then we would actually then say okay, wrap this in a router link. And inside of here is where we can say, :to"/user/user.name, just like that. There you go. We see our link showing up now, wonderful. So if we inspect all of these, we'll see that.

[00:06:36]
We can see /Leanne Graham, great. So if we click on it, we should see, we are correctly being navigated to username, so that's good. But we need to actually make sure this shows up in a way that actually takes into account the actual user's name. So how do we do that?

[00:06:52]
Well, we need to get info on the route. So where are we gonna reach? Reaching for useRoute from vue router. And then we'll initialize the route by calling useRoute. And then we can basically log the route.params to show you what's happening here. And you'll notice that inside of here, we have a name because that's what we named it inside of our routes.

[00:07:17]
So now that we have that, great. All we need to do now is just swap it out to go route.params.name, Save. And there we have it. I gotta use it again, Ervin, Clementine, it works. Question.
>> What if you wanted to pass that user object to the profile page and have additional information that is not on that user's list page?

[00:07:50]
>> That is a great question. So what I want you to check out for this, so the question here is around the fact that what if you actually wanna pass that user information to the route, right? Some sort of, props passing, that kinda stuff. I believe it's actually in the program.

[00:08:05]
Passing prop to route components, literally this page. So this will allow you to do kind of some interesting stuff regarding how you pass parameters. But what's interesting too is that, if you turn certain route is props true, it will actually drop the parameters in certain things as props to the page.

[00:08:22]
So you don't even need to use useRoute. It will actually be passed as a prop to the component which again takes a little wrapping your mind around. So it's one of those kind of call it intermediate to advance techniques that if it's something you're looking for, take a read at this document, see if it fits your scenario.

[00:08:36]
But generally speaking, what we've been doing thus far regarding just grabbing the route.params.id, that fulfills, I would say, a good 70% to 80% of the use cases out there, which is what I wanted to make sure that we covered.
>> Are you gonna get burnt by deep linking to that page?

[00:08:49]
>> Deep linking to the page.
>> Passing in props in the object through the link yep.
>> Yep.
>> And you deep link to it.
>> Yep.
>> Without having visited the page before that?
>> Yeah.
>> Does that burn you.
>> That act, yep, so that's where the state management can be very tricky.

[00:09:04]
So that's why you have to be careful when you're passing that kinda stuff around, what stuff is already accessible? Because earlier, during the exercise, if you all notice, when I loaded the home page for cest-la-vue, the five users actually don't show up. So if I refresh this page, you'll notice it's gone.

[00:09:20]
And the reason for that, it's not a bug actually, it's how it's intended because user page is what's actually loading the data. And so unless you visit the user page, home page has no idea what these five things are. And so as far as the state's concerned, the composable is concerned, it doesn't exist.

[00:09:36]
So knowing where to import, how to make sure they stay in sync that's part of the puzzle of the game that we play.