Work on incorporating the Vue router into the project. Then, configure and build the routes you need to be able to navigate to the different parts of your project.
- [Instructor] So, although everything is working pretty well, there's actually a couple of errors that we're getting in our project. And if you go to the console, you can see what they are. It mostly is that we have several methods that aren't really being used. And let me show you where that is and we'll fix that before we get into the routing. In our Products.vue component, we are asking for some events that are never going to be triggered. And that's because each of these events are skipping these Products.vue file and going directly into App.vue. And that happened because we added parent to the emit. So this means that it's not going to trigger anything in products, it's going to straight back up into Apps. All we really need to do is just get rid of this one right here and this other event. And let's save that and refresh the page. And now everything should be working just the same. Let's go ahead and add a few things we can see this coming up. And if we look at the Inspector, we shouldn't see any errors in the console. So just a little bit of cleanup before we get started with creating our route. Now to do that, I'm going to go into the main.js file, and I need to initialize how I'm going to be bringing in the router. So here I'm importing Vue, the main Vue component, then I also need to import something called VueRouter. It's just another library that we're going to need to make routing work. Now, further down here, I'm going to reconfigure how the vue object works and I'm going to say that I'm going to use VueRouter. So that's going to set everything up, and now we need to do something called setting up a route. This is pretty much setting up the URLs that your page is going to respond to. So I'll sent up a constant here, router, and this is going to be equal to a new VueRouter object. And then in here, we're going to just specify an array of routes. So this is going to tell the application what happens when somebody goes to different URLs, and each of those are going to be in a separate element. Put them in a separate object here, and we can define different kinds of paths that are typed into our application, and then tell the application to load components based on those different paths. So you specify a path parameter and then you can say something like, "/ray." And whenever somebody goes to your application and types in /ray at the end, it would load whatever component we put under, of course, the component element here. So we could say, whenever somebody goes to that URL, I want you to load this component, right. So, there's also way of saying that the fault is going to be to load this particular component. So that's what you want to do. If anybody types in anything right now into our URL, any sort of path, then it's just going to default to that component. And what I want to do also is create an alternate path checkout, because we have a Checkout page. And then I'm going to specify that when I'm using that path, I'm going to use the checkout component, right. Now, these components don't really exist yet in here, because we haven't imported those different components, but we need to do that as well. Well do that here, just like we do on the pages. We can say import Products from, and then the location, components/Products.vue, and then import the other one, Checkout from checkout.vue. And now we have the different components available to this main.js file and we've created a router that has information about our different paths. Let's go ahead and save this. I have a nice formatter that makes it looks a little bit nice when I save, and that's what is called Prettier, which was one of the things that I installed with my vue.js installation. All right, so, once I have this router, I need to go ahead and use it. And what we need to do is, right here under render, we're going to say use the router that we created earlier. So now you've created different routes, really just one route plus the default. And you have imported components that are going to fit into those routes. So how do we actually get them on the page? To do that we'll go into App.vue, and instead of importing these two different pages, we're going to import a single thing called router.vue. And we're going to pass everything that we would normally pass to both of those pages. So I'm just going to get rid of this and close this one out, router-view. And this is going to replace whatever is in here with the different components from the router, depending on the URL of the page. So, let's take a look, let's delete these right here, because these are duplicates. So let's get rid of those. And there's a couple of duplicate events as well, so we got rid of those. And let's go ahead and take a look at our page now. And you'll see that we no longer see the Checkout page, we just see the My Shop section here. And if we add anything, it looks like it's just going right here into this dropdown, but the Checkout is gone, right. If we wanted to see the Checkout, let's go ahead and add something to the shopping cart. Now, let's put the mouse at the end and type in checkout, and now you can see that when we go to the Checkout route, we get to see the Checkout page. So, Vue is actually retaining all that data through the route, and I can continue to add and delete things in here as well. Because all the data is maintained as I navigate through the different pages. So this is pretty cool and it's very easy to setup. There's a lot more to routing and route, and I need to show you how to create links. We'll do that in the next video.
- Basics of Vue.js
- Installing Vue.js
- Making an app more reactive
- Working with templates
- Binding classes with objects and arrays
- Creating transitions and animations
- Toggling elements with a key
- Understanding Vue CLI installations
- Installing additional modules
- Adding navigation
- Building routes and creating route links