Learn how to use the Vue.js router to create various sections in the application.
- [Instructor] In this video, we're going to be talking about the Vue.js router and start implementing the routes that we're going to need for our app. So, let's start by going into the source folder, and into our views and let's create a few views. So, create a folder called authentication, a folder called tasks, and then inside of authentication we'll create the Login.vue component. And so, of course all Vue components want to be wrapped in template tags, and then I'll just insert a heading here of login route, so that I have something to display for the meantime. And I'll just copy that and create a register.vue file. And I'll do the same thing and I'll just say register route. Then you want to go into tasks, and I'm going to create a new file called TasksAll.vue. It's going to hold all of our tasks. Then I'll create anther one, called TasksCreate.vue, which is going to be to create tasks. Then lastly TasksEdit.vue, for editing tasks. Next we'll go over to our router and import all these new components, and map it to our router class. So I'll import the login component from views/authentication/login.vue. And so you want to import all the other ones that we created. All right, and then once that's done let's go ahead and start adding them to the routes. So I'll just replace this about one with tasks, and I'll name it tasks-all, and then the component will be the TasksAll component. And I'll just copy this and create another one. This'll be tasks/new for creating ones, I'll just name it tasks-create, and then bring in that component. And then tasks/:ID, and this'll be tasks-edit, and of course our component will be TasksEdit. Lastly, I'll create one for register, just name it the same. Register component. And then my last one for login, and name it login, with the login component. Now any other routes we want to redirect to the home. So for example if a user goes to a route that doesn't exist, we'll just redirect to forward slash, which is the home route. Now let's go over to the nav bar and map all of these. So here at the top I'll create a router link element, and I'll just copy this logo and task manager text, and paste that in there. And so this route link is going to create an anchor element, and so I'll just navigate it to home route, and give it the same class that the anchor below had, which was navbar-brand. Okay, and now we just need to do that with all of our other routes. So just replace this with home, it's already routing to home so I'll change the class to nav-link, 'cause that's what all the navigation links have. And I'll get rid of this active class. And then I'll just copy this and do the same for all of these. And we'll leave logout and David or username like that. So let's go ahead and test all these and make sure that the links now navigate properly. Make sure that your nav bar brand's also navigating. So now I also want to make this button navigate to the tasks page. So you can go to the hello world component and I'm just going to add that right above, just like the others. And so you see now the view tasks will actually navigate to all tasks. And you'll also notice that if I go to an invalid route it redirects to the home, so that's good. And I'm also going to bring up the inspector, from the developer tools, and you'll notice that if you go to a route, and I'm just going to inspect this element, you'll see that when I navigate it the view.js router has a class called routerlink-active. So that's not going to work for us because Bootstrap's active class is just called active. So we want to change that to be active instead of routerlink-active. So back in the router, you can add this right below the array, linkActiveClass: active. And so now you'll see it adds the active class instead. And you'll see the links are now highlighted whenever you're in the appropriate route. So if I go to register or login, you'll see each one highlights. But you'll also notice that home is always highlighted, so we can get rid of this. Let's go back to the navbar. Now the reason for this is because it basically takes the to route, and so any route that matches that will have the active class. And so all routes have the home route, so that'll always be active. So you can add exact to this, and it'll basically say "you have to be exactly at this route" for the active class to be added. And now you'll see the home will only have it if you are exactly at the home route. Another thing you'll notice is that there's this little hash symbol next to the route, and it's always there, regardless of which route you go to. Let's go ahead and get rid of that. Go back to the router.js file, and just below linkActiveClass you're going to add an option called mode, And just set this to history, and delete the hash, and you'll notice it's gone now, and it won't be there by default. The next video, we'll talk about navigation guards and how to protect different routes.
- Single-page applications and Vue.js
- Preparing your development environment
- Creating a Vue.js application
- Using the Vue.js router
- Building a RESTful back-end API with Node.js and Express.js
- Connecting to MongoDB
- Validating and managing a user session
- Connecting Vue.js to a back-end server