- [Instructor] Well, hopefully, that tour of all the files
and folders in our Vue project
helped you sort of get a sense
for how everything fits together
in a Vue project.
The next thing we're going to take a look at here
is how to add different routes to our application
for the different pages that we want to add.
But just one thing that I want to show you before you do that,
you may have noticed
that when we were looking at the .vue files for our project,
that if you're using the same ID as I am,
there was no syntax highlighting by default.
Well, in order to fix this,
since we basically just need to add some syntax highlighting
for .vue files,
what you can do if you're using VS Code
is click on this little extensions tab here
and just search for Vue.
And you're just going to want to install the Vue extension,
click install, and now if we open up our Vue files again,
we should see
that they have some very nice syntax highlighting now,
which makes it a little bit easier to read.
So getting back to adding routes for our application,
obviously we're going to want the e-commerce site
that we're building to allow the user
to navigate between different pages.
For example, we want to have a products page
that displays all the different products
that a user can buy on our site.
We want to have a product detail page
that will display more details about each of the products
if the user clicks on one of them.
And we'll also want to have a sort of shopping cart page
that will display a list of all the items
that a user has added to their cart.
Now, in order to add all these different pages
and have them show up
when the user navigates to a certain route,
we have to add something called the Vue router
to our application.
Unfortunately, this is actually really easy to do
with the Vue CLI.
All we have to do is open up a terminal
and inside our project,
we're just going to run the command vue add router
and hit enter.
And note that if you've made any changes
to the App.vue file,
this command will overwrite it.
So if you want to preserve any of those changes,
make sure you rename that file to something else
to figure that out afterward.
And once we run that command,
it's going to ask us this thing about history mode.
Just answer yes to this for now.
This will just have one tiny little implication later on
when we actually build and release our app.
Just remember this for later on.
And then after everything runs,
if you open up the file tree again,
you should see that we now have this router folder,
which contains an index.js file in it.
And this views folder,
which contains some sort of stock pages for our application.
And if we open up App.vue again,
we see that it's added this sort of navbar thing
to our application with some links
to the home and about pages.
Now, the first thing we're going to do here actually
is open up this views folder.
And if you want to take a look at these two pages,
feel free to do that,
but I'm just going to delete them since we don't need them.
We're going to create our own pages here, so delete that.
And delete that.
And we're going to replace those with our own pages.
So remember earlier that I said we want a products page
for displaying all of our products.
So we're going to call that ProductsPage.vue,
and we're going to want a product detail page,
which we'll call ProductDetailPage.vue.
And last but not least,
we're going to want a cart page for the shopping cart.
So we're going to call that CartPage.vue.
And then what we're going to do
is we're going to go through each of these files
that we just created and add some very basic code.
So remember that all the Vue component files
have three main pieces.
They have a template,
so we're going to add the template tags here,
which we'll fill in just a second.
They're going to have a script
which will contain the basic JavaScript code
behind our component.
And they have a style tag
which contains the styling for our component.
So we'll put those tags there as well.
And then here's what we're going to do.
For now, we're just going to fill this
with some very basic texts
so that we can get our pages set up with the Vue Router,
and then we'll come back
and actually implement the pages
once we've got the routing logic working correctly.
So here's what we're going to do.
Inside here, we're just going to say h1
and then say something like This is the Products Page,
and close that tag.
Then inside this script,
we're going to say export default with an object,
and this will allow other components
to import this component and display it.
We'll see how to do that in just a second.
And it's usually a good practice
to give our components a name property,
which will sort of represent our component
to the rest of the application.
So we'll just call this one ProductsPage, like that.
And last but not least,
we're going to give our component some styling.
So we're just going to make the h1 heading,
we're going to make the color of that heading red.
And we're going to use different colors here
just to show how scoped styling works.
So let's add the scoped property to our style tag, okay.
So that's our ProductsPage for now.
Basically, all we have to do
to implement the other page is very basically,
just to get the routing working
is we're going to copy the code from here into our other pages.
We're just going to make a few changes.
So for our Product Detail page,
we're going to say This is the Product Detail Page.
We're going to change the name here to ProductDetailPage.
And we're going to make the color here blue,
just to demonstrate how scoped styling works.
And finally, we're going to paste that
inside the cart page as well.
We're going to say, This is the Shopping Cart Page.
We're going to make the name CartPage
and we'll make the color here green, okay.
So now that we have these three page components defined,
let's actually define the paths
that we want them to be displayed on.
Now in a Vue CLI project,
the place that we do this
is inside this index.js file inside the router directory.
Basically, what we want to do
is we want to delete these two existing routes here,
which now point to non-existent components
since we deleted those from the views directory.
So we're going to delete those
and we're going to add a route object
for each of the new pages that we just created, okay.
So here's what that's going to look like.
We're going to start off by defining our products page.
And before we actually do that,
we're going to need to import our pages.
So let's delete this home component import,
which no longer exists.
And we're going to say import CartPage
from ../views/CartPage.vue.
We're going to say import ProductDetailPage
from ../views/ProductDetailPage.vue.
And then we're going to say import ProductsPage
from ../views/ProductsPage.vue.
Okay, and now that we've imported those components,
let's add routes for them.
The products page route is going to look something like this.
We're going to say path /products.
We're going to name our route.
That's usually a good practice to name our routes in Vue.
We're going to just call this one Products.
And then we specify the component
that we want to display at that route,
which in our case is going to be the ProductsPage, okay.
And the next thing
is we're going to create the ProductDetailPage route.
So here's what that's going to look like.
We're going to say path /products
and then we're going to do something here
that I'll explain in just a second.
We're going to say /:id,
I'll explain that in a second.
We're going to say name
and for this route the name is going to be ProductDetail.
And for the component,
we want to display the ProductDetailPage, okay.
So this little id thing that we just coded right here,
this :id thing, this is what's called a URL parameter.
Basically, what URL parameters allow us to do
is get the value of a section of the current URL
and use that to choose the data
that we want to display on the page.
So in our case, what we're going to do
is use this to display the data of the item
whose id matches the id in this part of the URL.
So for example, if we were to go to /products/123,
we'll want the page to display the data
for the product with the id 123.
And we'll see how to do all this
when we implement the ProductDetailPage in one more detail.
So for now, that's going to be :id.
And the last page we're going to do is the CartPage.
For that, the path is just going to be /cart,
and it looks like I did a typo here.
Let's change that to a comma like it should be.
The name for this route is going to be Cart.
And the component for this route
is going to be the CartPage component, okay.
And last but not least,
what we're going to do here is we're going to add another route
that will redirect users from the home route,
which is just the basic /route to the ProductPage
since in our case,
the ProductsPage is basically our homepage
as it is on most e-commerce sites.
So here's what that's going to look like.
Inside here, we're going to say path
and the path is going to be the /route.
And we're just going to say redirect
with the value of the path
that we want to redirect to the user to
when we go to this home path here.
And in our case, that's going to be /products.
So basically what this will do
is when the user tries to visit local host 8080
without anything after that,
it'll redirect them to local host 8080/Products.
So now that we have each of our routes set up,
let's take a look at our app
and make sure this works like we want it to.
So if your app isn't already running,
you're going to want to run npm run serve,
and then we'll open that up inside our browser.
And it might take a second to build here.
So let's go over here and refresh.
And you'll notice that if we go to local host 8080,
it'll automatically redirect us to our /products page
and display the correct heading there,
along with the scoped styling as we can see.
If we go to /products/123 for example,
it'll show the Product Detail Page.
And if we go to /cart,
it will show the Shopping Cart Page,
again with the regular scoped styling.
And there's two more things that I want you to note here.
The first thing is this navbar up here
that says Home and About.
I'm going to leave that inside the App.vue component for now,
just so we know how to create a navbar
when we actually go about doing that
for our own application,
we'll get to that in a little while.
But the other thing that I want to point out
is if we look in the App.vue component,
you can see this router-view thing inside the template.
So what this router-view is,
is basically it's a space on the screen
that our app will render
whatever the current matching component for the URL is.
So in our example, when we go to /cart,
what Vue does is it renders our cart page component
inside this router view space here.
So it's basically a slot that we can change the content of
depending on the current path that we're at.
So if we go to /cart, it'll show the cart page.
If we go to slash products,
it'll show the Products Page et cetera.