In this lecture, we will look into view router. So what is view router? And why do we need it? So view router is basically used for navigation inside our application. So generally the reason why we need a specific library, kind of like for navigation itself in this kind of single page applications is navigation inside us SBA is very different than navigation inside a normal website. So like we already saw our previous examples on how our website is different from an SBA inside a single page application we don't want, we just want the conference to be swapped, we just want the conference to be you know, changed at will.

So for that we don't forget that we can use we if if there's just one or two components, but if there are many, many components, we cannot use Vf. And also if we want to show a particular component in a particular URL, we cannot use V for that as well. So as you go through your router, you'll understand its importance and why it's kind of like using that way. So let's get started with that. So to install view router, we can go to the terminal. I have a project open here.

So, so one thing just to remind you guys, I hope you're taking our GitHub repository. So every lecture is being updated with the new code. So this one also will be updated with the new code for the bureau lecture. So you can follow along with that, but I strongly advise you to follow with me as I'm doing things. All right. So we can add the view router by using yarn, I'm using yarn, but if you want to use NPM is npm install view hyphen, router hyphen, haven't saved yarn add view router.

So that is installed. So once that is installed, we can go inside main.js and declare it inside it. So we can let you know that you know, we want the view instance to be associated with the bureau data. So we can do that by saying import. Now, view router. So after this, what we need to do is we need to tell you that it needs to, you know associated with this library so we can save you dot you And inside that router.

It's a common syntax when you're kind of like importing a new library into the few projects. So save it. So now we have integrated viewport view router into this. So now we can create a new file that says router dot j s. Inside this file we can create a new router instance by exporting it and it automatically imported the bureau library for me. So So instead of the view router we can have an array of routes. And inside the routes are a little bit closer here and instead of routes array we can have our new object.

For each object we have the path we can have and before we even create some create some path We need to import components onto this. For example, it's important to components login and signup, or register, import login. So now that we have the components imported, what we can do is we can create paths for these components. For example, the root path would be app component. And we can use the login component as slash, login. And each object needs to have kind of like I mean, doesn't need to have but kind of like has a certain set of properties like name, you can give the components names as well or give the paths names as well such as I can give a slogan.

We'll also look into why it requires a name and a path as big. So we'll also look into why it needs a name and a path as we go on because routing can be done in two ways using the path or external name as well. So one more thing, next thing what it requires is this one is mandatory. So it needs a component which component to be associated with associate With that part, so that is login. And like we discussed in the previous lectures like we can pass props to the component, right. So it also needs to kind of like have a props.

So when this component will be dealing with props, so that's something we need to set true because if we are dealing with props in the component, now we can follow the same guidelines to create a path for the register component we can see part and slash register, we can say name is register. Our component here is register. And does it accept props for this, let's say false. All right. So now that has saved it. Alright, so now we have our view router instance.

So we need to associate this view router instance with our main.js. In main.js, we have this router library which is linked to view instance. But it also needs to know the kind of routes that are required. So for that, what we can do is we can import this file we can import as routes from router, right. So once we have the routes from router, what we can do is inside this view instance, we can just say notes. So now the view instance has the routes in built into it.

So if I save it now the view router is linked with the project. So we can use view router throughout the project anywhere we want. So let's say inside our app, we want to have kind of like a navigation bar. Right. So in terms of displaying the router content, there are two specific parts to be remembered. The first one is the router link.

That is link. Alright, this is called navigating the user from one page from one component to another component. But we also need to have another tab that says router view. This is used to display the competence Which we are navigating to understand sooner. So each router link has the property called s two. And this indicates the path that we defined inside the router.

So here we have the slash login, right. So we can say login here as well. And it's have some text login. So initially app component will load up, let's have some indication that it's app component. And so now what happens is, if I just go into our website, I can see nothing. The reason is, we see nothing but we have an error that says cannot read property map of undefined.

So the reason why we're getting this error is if we go to our main.js instead of view instance, we were adding routes here. But view doesn't recognize routes. So this so this is one of so this is one of the very common mistakes that developers do. So instead of specifying routes here, what you can do is you can say router handouts. So you only knows to accept the router property. So when you give it routes, it doesn't match it with that.

So if I save it and go back, my ERISA sold. So if I click it, what happens is the login component will be rendered on to this outer view. So instead of this outer view, you will see the login component. Now the log Now there are two views empty, but if I click it, login form appears. And you can also see in the URL that slash login has appeared. Now if I go back, we can see it's just slash, but you might be wondering why is is there a small hasher, right, so that has to do with something called as mode of the router.

So we can go to a router.js. And inside our review router instance, we can say mod history. So here inside mod, if I say hash, we get the hash and if I say history, we no longer get the hash symbol. It just go here. And if I click on login, I get the slash login. Alright, so, so let's do one thing.

Let's create another router link. And for the second one, let's link it to the register component. Second register, register. Alright, so, so let us make this links a little bit bigger. So I save it, we have two big components. And I can just say, Br.

Yeah, so this register. So this register router link will be linked to the register path inside our routes. And this login will build into the login. So as of now I have the login component, I can just go to the homepage if I want to. And I can just say login and hit login. And if I say register, I will say register form.

So whatever the component I'm going I want to display that gets into that gets that gets entered on to the router view tag. So that's it for this lecture. In this lecture, we learned about router link router view. I know it sounds confusing. In a very lengthy process, but just navigation, but trust me, it's worth it. Alright, I'll see you in the next one.