File System Routing · Get Started with Nuxt v2

Sometimes you might need to create dynamic routes or nested routes or you might need to further configure the router property. This chapter will go through everything you need to know in order to get the best out of your router.
will automatically generate:
Sometimes it is not possible to know the name of the route such as when we make a call to an API to get a list of users or blog posts. We call these dynamic routes. To create a dynamic route you need to add an underscore (_) before the .vue file name or before the name of the directory. You can name the file or directory anything you want but you must prefix it with an underscore.
will automatically generate:
You can access the current route parameters within your local page or component by referencing this.$route.params.{parameterName}. For example, if you had a dynamic users page (users/_id.vue) and wanted to access the id parameter to load the user or process information, you could access the variable like this: this.$route.params.id.
Nuxt lets you create nested routes by using the children routes of vue-router. To define the parent component of a nested route, you need to create a Vue file with the same name as the directory which contains your children views.
will automatically generate:
This is not a common scenario, but it is possible with Nuxt to have dynamic children inside dynamic parents.
will automatically generate:
If you do not know the depth of your URL structure, you can use _.vue to dynamically match nested paths. This will handle requests that do not match a more specific route.
Will handle requests like this:
There are multiple ways to extend the routing with Nuxt:
The router property lets you customize the Nuxt router (vue-router).
The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value '/app/'.
You may want to extend the routes created by Nuxt. You can do so via the extendRoutes option.
Example of adding a custom route:
If you want to sort your routes, you can use the sortRoutes(routes) function from @nuxt/utils:
Controls whether the router should fallback to hash mode when the browser does not support history.pushState but mode is set to history.
Configure the router mode, it is not recommended to change it due to server-side rendering.
Provide custom query string parse / stringify functions.
You may want to change the separator between route names that Nuxt uses. You can do so via the routeNameSplitter option in your configuration file. Imagine we have the page file pages/posts/_id.vue. Nuxt will generate the route name programmatically, in this case posts-id. Changing the routeNameSplitter config to / the name will therefore change to posts/id.
The scrollBehavior option lets you define a custom behavior for the scroll position between the routes. This method is called every time a page is rendered.
Available since:v2.9.0:
In Nuxt you can use a file to overwrite the router scrollBehavior. This file should be placed in a folder called app.
~/app/router.scrollBehavior.js.
Example of forcing the scroll position to the top for every route:
Available since: v2.10
If this option is set to true, trailing slashes will be appended to every route. If set to false, they'll be removed.
In Nuxt we have 2 ways of getting data from an API. We can use the fetch method or the asyncData method.
Stay updated on new releases and features, guides, and community updates.
Copyright © 2016-2026 Nuxt - MIT License