- [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.