File system routing

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