All right, in this lecture, we will look into how to create specific URLs for specific people, right. So the main goal of this lecture is to create a URL that can be shared. And when the URL is clicked, I will get the simpson house data. So let's go. So the first thing, what we need to do for that is instead of out to fight for the part of person, we can add slash. And here we are expecting another parameter, right?

So the parameter is person ID. So this is what we're expecting. And when the person ID is dynamic, that's when you put the colon before it. So if you're going to have any dynamic part in the URL, you're going to have a colon in front of it. So slash person will go for the person profile component and colon person, it will go for the person's ID. All right, so if I can save this, and while instead of people, or instead the person component, what we can do is for clicking, and instead the person component on view profile, we no longer need the name and parameters.

We're not going to send them Instead, what we're going to do is we can also remove this context variable. Instead, we are going to normally navigate, we can say view profile. From sorry, person, we can say, person, slash. And in addition to this what we can also send us this.person.id. So if we go to the data Jason, for every single person object, we have something called as ID or its underscore ID, right? Or underscore ID.

So this will be sent, and you can save it. And instead of the person profile component, what we can do is it no longer requires a prop, so we can remove the prop section here. Instead, we can have a data component data property. This will have a person ID and this ID can be retrieved through this dot dollar route dot params dot person ID. So parameters is the parameters that we're going to send. In our case, it's the person ID in the router.

So inside the person component where it says person slash, and whatever this content is, this automatically becomes the person ID. so here we can say person ID. So for the biggest part, what we can do is we can comment it all out. So just so we don't get any errors, we can also say, comment, and we can see mounted and console log it can go to though, and have a click something. I'm getting the person ID, right. And if you can see in the URL bar, we are getting the specific URL for that particular person.

So if I have more to share This URL with anyone with anyone, I'm going to get the same data, right? So it won't throw me an error. It won't say props required because you're not using props. So now it's our duty to find out which which person does it belong to and fetch the person's data. So what we can do is we can, we need to find the index of the persons who has this ID, and then we can fetch the person with that index. Right?

So we'll go to person profile, I'll show you that's not too complex. So what we can do is inside mounted, we can also have this index. And we could also have the person because that's where it's quiet. And instead of the computed properties, what we can do is we can suppose in here, done data. So here we also need to import the data, data file. index.

All right, so now we need to find the index. So the way we can do is we can say for each for the data array, and inside the array we have, each object has an element. And we can write an IF loop here that says object dot values. And instead we can pass element.in indexOf this dot person ID equals equal to zero. Then we can have the VM context variable, and we have got person ID equal to object dot values. All right, so what's happening is data is an array right?

So Inside this array, we have six objects. So for each object, we have particular key value pairs. So what I'm doing is inside the data array for each object, I'm extracting the values of the object from the keys. So I'm, I'm only going to get these values instead of the keys only this values. So for the values, I'm searching ID, which we sent. So if the value consists of the person ID, then that's the index of the person.

So now what we can do is when we have the index, this should be index right? Yeah. So when we have the index, the computed property will automatically run this person property will be updated by data and the index. So if I uncomment all this and if I save and run, everything should work fine except there is an error. It says name have been declined, okay. So the reason why this is this one is coming is because of prints count, right?

We need to have our the computed property that says Friends count, and it should return this door person. Friend start length. And now we're going to refresh. And I'm going to get only one error that says name of undefined. So why are we getting that? So the reason why we might be getting that is because the template is being loaded and then the data is being fetched, right?

So instead of mounted, I can say created, and hopefully we should not get that error. Yep. So what's happening is that if you're using mounted, it will run after the template has been mounted right. So when the template has been mounted, it looks for a property called as person and person until until this point of time during the rendering is null. So none of none of name is going to throw an error. But if we say created, created is usually run before the mounted so by reading created before the mounted, we are getting the data, we're sending it to person and the In displaying it, so leading to lowers.

So now we have this link, and you can happily share it to any person award. So usually I would host on to a free hosting website like Firebase or GitHub, and we could share the link. And we can go back. And we can do that for any person. Cool, right. So that's how you create dynamic routing in Vue js.

So now you can have dynamic URLs. So that's it for routing. And that's it for this lecture. I'll see you in the next one.