- [Instructor] For every website you visit
you find that most of them have more than one page.
A router is used to create those pages
and manage navigation from one page to another.
Routing in Nuxt is automatically handled for you
through a concept called file system routing.
Nuxt has different strategies for handling routing.
We have the basic or automatic routes,
the nested routes, and dynamic routes.
Basic routes are routes that are generated
based on the file system
of the files contained in the pages directory.
For every file you create inside the pages directory
a new route is generated and a new page exists.
Let's say we want to create new pages for a website,
for example, a contact page and a blog page.
In a typical Vue.js application
you have to create routes manually using Vue Router.
You do this by setting up a router.js file
and adding the routes that you intend to create
inside the file manually.
In Nuxt this part of the process
is already handled for you automatically,
which means that you never have to manage
your own router file.
Nested routes, on the other hand,
are routes with nested pages.
In a case where you have a page
that goes multiple levels deep,
Vue Router will allow you to add children routes
to an already defined route object.
In Nuxt this is also handled for you.
All you need to do is create a Vue file with the same name
as the directory where you have the child route.
Let's see an example.
We'll create a new file called user.vue
inside the pages directory.
I'll do that by right-clicking and creating new file,
and we'll call that user.vue.
Now, inside the user.vue file I'll add a template,
and a div, and also include a paragraph
that says this is a parent view.
Now, when you are dealing with nested routes
you always need to add the Nuxt child component.
This component is used for displaying
the children components that you've included
in your nested routes.
Now, we'll go ahead and create a new folder
in the pages directory called User.
I would right-click and click the option New Folder
and call that User.
Remember I said for nested routes
you always want to match the name of the parent file,
in this case we have user.vue
and we have directory called User.
Now, inside of this I would create two new files
by right-clicking and clicking New File.
The first file I'll call post.vue,
and the second file I'll call profile.vue.
Now, for each of these file I'll just add a template
with a paragraph stating what file that is,
so post.vue in this case.
And for profile, template, paragraph, profile.vue.
Now we have two files inside the User directory.
Well, let's see how Nuxt will actually
auto-generate the route configuration in this case.
So, if we head over to the Nuxt build directory
and look for the routes.json file
we'll see that Nuxt already auto-generated
the routes needed to display these pages in the browser.
First, we have the user page that we created, right?
And then we have two pages
that are children of the initial route user.
So, we have the User-post and the User-profile.
Now, if we go back to the user.vue file
I would also like to add here a Nuxt-link component.
What a Nuxt-link component does is link you
from one page to another.
So, I would also like to add a Nuxt-link component here
and specify the to property to be the path name,
so /user/post, and close it out.
And here I'll just add Post.vue,
and we'll duplicate that by copy-pasting it
and change that to Profile.
Now, with this, if we head over to the browser
we have one ESLint error in the user.vue file,
so I would add an extra line here and that should be fixed.
Now, if we head over to the path /user
we should see exactly what we just created in the content.
So, we have the texts, we have two links,
one linking us to the Post path
and one linking us to the Profile path.
So, let's check that out and see what that actually does.
So, clicking on the Post.vue will take us
to the user/post path, which is one of the nested routes.
And if I go back and do the same for the profile
we'll also see that we have a new nested route created.
So, the results we get from this is two nested routes
with two new pages displayed in our browser.
Now, remember that we did not have to create
any router configuration for these pages,
and it just works out of the box.