- [Instructor] Let's finish things up
by cleaning up our application
and adding additional links to the different sections.
So right now, you can see that because of the way
that the router is managing things,
we don't really need to import these products
and checkout into this App.vue components.
Let's go ahead and get rid of that and it will be nice
if we reorganize this a little bit.
So I'm just going to move all the events down to the bottom,
it just makes it a little bit cleaner
to work with the events this way.
So in addition to that, because I'm not importing
those two components, I can get rid of
this components section here in my export
and other than that, I need to go ahead
and add links to my different places.
So for example, if I add a few things here,
what I want is a link to go to the checkout right here.
And once I have the checkout,
I need a link back into this homepage.
So, let's go ahead and start out by going
to the checkout page and we'll create an additional button,
let's make this window bigger here so we can see everything.
And what I'm going to do is right underneath my table,
I want to add an additional link back to the homepage.
But I can't use a normal link like I would on a regular page
because this is being managed by my routing module.
So, let's go ahead and add something called a router-link
and this link is going to look like a button,
so with Bootstrap I can just easily add a class
of btn and then make it a small button
and also an outline button with the info color
which will look blue, and we'll make the text
have a dark color to it.
Now, with a router-link, you want to use a directive
called to, and then specify
where this link is going to go to.
So, this will be my homepage and I will use a link
that's called Keep Shopping here.
So, this will be in my checkout page
and then I need to of course close router-link.
So, let's go ahead and save that.
We'll also need to update the Navbar.
Let's go ahead and copy all of this stuff right here,
I think it's going to be pretty similar.
And in the Navbar, we'll need to add a link as well.
So, this is going to go
after the second div right here.
We'll create another router-link
and this is also going to be a button
that looks pretty much like the other one.
Instead of going to the homepage,
this is going to go to checkout, the checkout page
and it's going to have a link text of Checkout right here.
And let's go ahead and save that.
So, let's take a look at how that's working.
I should be able to add some things right here.
And let's go ahead and add a few of these,
and then I should be able to see my Checkout button.
Now, this probably needs to be aligned to the right,
so let's go ahead and fix that.
And I need to add a class here.
Can float this to the right, so let's go ahead
and save that and let's checkout the link
and I need to obviously add a little bit
of a margin here to the right of this, so I'll do an mr-4.
So, this is one of the nice things about Webpack
that it's allowing you to update an existing page
without having to reload everything.
So, it's updating just a component
and modifying our page based on that.
So, let's click on this Checkout button.
Now you can see that it takes you here
and you can click on this Keep Shopping button
and go back to the front.
There is a little bit of a problem, you can see
that we're not getting anything here,
and that's because in the ProductList component
the default view for this section is to display nothing.
So, I'm just going to change that to actually d-flex
and this will show up here.
Let's go back into Checkout and now you can see that
if I click on Keep Shopping, it will come back here
and the list of all of the elements will show up.
This is pretty much it for the application.
I've given you a basic understanding
of the router and how it works.
There is a lot more to how you can use the router.
So, check the documentation for more information.