- In this chapter, I'm going to give you an introduction
to using the Vue Router.
The Vue Router allows you to create something equivalent
to pages on your application.
And you can have different pages show different pieces
of content.
Now, in order to show you how this works,
I'm going to need to reorganize the way
that I have done my components.
So right now I have this main app, that vue file.
And it's loading up several components.
So I'm loading up navbar, the price-slider,
and the product-list.
What I eventually want to do is add a checkout page.
And that's going to be sort of a separate page
in this application.
Which means that I want to move everything that is in here
into a sub-component of sorts.
So, it's just a little bit of a reorganization.
We're going to start by creating a new file here.
And I'm going to call this one Products.vue.
And this is going to be a pretty standard component.
So, we're going to start with a template
and in here I'm going to start with a container div.
And then I'm going to add my components in here.
So let's just make this really big
so we don't have to look at that other stuff.
And I'm going to app that vue
and I'm taking all these things from within here
and just cutting them out for right now
and moving them into this Products.vue.
So this is actually going to load my other sub-components
and what I'll do here is put in my script.
And in my script I'm going to need to import these things,
just like I would in any component.
So I'll do import Navbar from
and then this component's in the same folder so Navbar.vue
and then import the other ones as well.
And actually you need to do these out here
before the export statement.
So, we've got two of 'em.
And I'm going to import the product lists as well.
And these actually need to be semicolons.
Alright, so in my export default statement I'm going
to give this a name.
I'll call it 'products'.
And I'm going to need to pass along the props
that I'm going to use in this section.
This is pretty much going to have all these props up here.
So I'm just going to import all the props here
that I'm going to need to pass along.
And I'll also need to include the components
that I'm going to be using in this component
which is pretty much the ones you see up there.
So this is going to use Navbar, PriceSlider,
as well as ProductList.
So that's pretty much all the code
for this Products.vue component.
And what we need to do now is in App.vue.
We need to import this component into App.vue.
So, this Products is going to be the loader
that loads the other things
and so now we need to connect App.vue to it.
So that's going to be pretty easy.
We're going to call products
and again pass along all of the parameters here.
So, I do think I can just grab these from here.
Because it's just going to take everything
that is inside of these.
So I'll grab these.
I'll probably have some duplicates,
so I'm going to delete the ones I add.
I think maximum is the only thing
that I passed more than one thing in.
And it's actually highlighting it for me
so I can get rid of it there.
Alright, let go ahead and put the events kind of together.
Not a big deal.
And then I'll need to import this.
Instead of importing all these things, I'm going import
products right from the folder.
And this is the main App.vue so I need to make sure
that I target the folder.
And here the only component I'm using now is Products.
So it just simplifies the code in here quite a bit.
Let's go ahead and save this.
And I'll be surprised if- look at that!
Everything I typed in came in just fine.
But sure enough these buttons aren't working.
And the problem is that they're emitting events
in the parent component.
And now we have a parent component called Products
that actually has another parent component.
So we kind of put everything down one level.
That's actually quite simple to fix.
And all we need to do is look for all my emit statements.
And I can simply just add parent, period, and then emit.
Let's look through the others ones.
There's a couple here.
So just back up one level.
It's almost like a dot dot slash.
Save this.
Make sure I save this one.
And I think Navbar might have some emit statements as well.
Looks like there's another one up here.
Alright, so let's check it out!
And that seems to be working.
Let's just sort of check different things out.
Seems to be working fine.
My little slider comes in and out.
This drop-down works.
And this works so...
That wasn't as hard as I thought it was going to be.
Let's see.
Bamboo, let's try this one.
So looks like even multiple products are coming in
and my application is back again working.
So all we've done is brought everything down a level.
It's going to make a lot more sense
once we start implementing the router.
You're going to see that what we want is, essentially,
to have different pages that we want to load
whenever we post different URLs into our browser.