So this is a continuation of view router. So let's look into what more view router can do and how else we can use view router. So this is one way we can navigate to different components in our application, right? So what can we do? So the first thing, what we can do is, we can also have two other components in another way. So for example, we have two right, so we can also have this dynamic.

So that that is by using v bind. And we can say do so but now it is instance, if we want to go to the component, we need to use this syntax, we need to create an object. And inside this object, we need to say name. And inside the name, we need to specify the name. So this name is given in the routes file by declaring the components part. So that's why this name was important earlier why we kind of like wanted to include it.

So this index will also be used in the script tag in understand when we look into it. And if I save this and say login, it works the same so it can go back. homepage login It works the same, right. So this is just another way of using it. Now let's look at a scenario where we want to pass a prop to this component. So for example, in the login, we want to pass a prop that says, so we're going to create props property.

And instead of props property, create an object and the kind of property which we want to receive his message. And one more thing I want to mention in the previous lectures, when we talked about props, we discussed that this rotation generally right for a prop saying required. And the type is generally good practice, right. So just in case you don't know how to type all this stuff, then probes wouldn't be an object. So for that, you need to declare props as an array. And inside that array, you can mention props enter quotation marks, so you can see message.

So this automatically declares the message property as a prop. Which the login component is expecting. So it's the same thing as creating an object and doing all the stuff. But just if you want to have much more control on the Prop, like like if it's required, or you can mention it like this. Alright, so for us, let's go with the best practice. Inside the message, let's say which type it is.

It's a type of string. And is it required? Not really, but so let's say false. So if I save it, and now our goal is to send a prop or a message to the login component, right? So for that, let's create a data property, let's say message to login. Alright, this is the message which we want to send it to the login component.

So the way we can send it to the login component is using the router link. We can see after the name, you can put a comma And then we can we can have another property called params. So params is generally used for props. So insert params, what we can do is we can give the name of the prop that the component is expecting and its value is message to login. Right now we are sending the prop. So instead of login dot view, what we'll do is under the login form, we'll create a small h4 tag.

Inside this let's have the message. So from AB dot view, just to recap, we have a data property called as Mrs to login and inside this we have a string. And to send the string we need to have a new property called as params. Instead of items is an object, we have the name of the name of the Prop, which the component is expecting, and the value right so if I save it and go back, and if I navigate to login, we can see the password is one, two 345 All right, so that's the message I'm getting from the app component. Now what if we have a situation right now let's just remove these kind of props. It's not send any.

And since the prop is not required, let's say we have another component, right? This component is home. And inside this component, we have a big h1 that says, Welcome Home have a smiley as well, just to throw it in there. So if I save it, now, what I want is that so instead of login component, what I want is that whenever our user presses the submit button, I want them to be navigated to home. So how can we do that? So here in our logging component, we have our submit method.

So for this submit, we have linked in action that is submit form. So upon upon clicking Submit form, what we can do is we can use the router property, so that we can use by saying this dot dollar router dot push slash home. And before we can do that, we need to go back to our router. And we need to register the component missing input home from it slash components slash home and creating another part giving it a name or home component home. And since it might accept props in the future with let's just say Drew. So instead of logging component and if I save it, sorry, if I save it and go back, what we can do is we can go to log in and we can say any Muslim she and my password is something something and if I press submit, welcome home.

So this is one way we can navigate you Using the router inside the script tag, so this is routing programmatically. Alright, so one more way, what we can do is instead of giving it a URL here, we can create an object. And we can navigate using the name of name as well. So this is kind of like what we did with the router link, right? So the name is home. And if I save it and go back, and if I hit submit, we'll come home.

Alright, so now let's look into how to pass data, kind of like in the script. So similar to how we did in the router link, we can also have params. And we can pass the data. So what we'll do is inside of the home page, we'll have a prop using username, and that is required. And the type is string. Right, so welcome home.

Username. So whatever the user name that the user enters inside of the login page, here, here in the user name, we can pass that into the homepage, and we can display that here. So instead of the homepage, we need to also have a data property. Insert records have a username. And we can be more than it. Or we can bind it to the data property by using the model.

Alright, so the parameters that is expecting is username is the same name is the same keyword that we're using. So user name and the value is this dot username. All right, so one, one thing to notice here is that this so that this keyword might not have the right context, since it's inside the router function. So what I usually do is, I have a dummy. I have a root context variable, and I use it for that. So we introduce a name and I save it and I go back, and instead log in component.

I can say, mom, she and I can just keep my password or something else, and submit. Welcome home option. All right, so that's how you pass data. router. And one more thing just to remember is while passing data into the components using router, you need to specify the props property as true, right. That's one thing you should not forget.

So all right, that's it for this lecture. I'll see you in the next one.