Routing in Nuxt.js is based on the Vue Router library, and allows you to define routes for your application that map to the different pages in your application.
In Nuxt.js, routes are automatically generated based on the file structure in the pages
directory. Each subdirectory in the pages
directory becomes a nested route, with the filename defining the name of the route. For example, if you have a file at pages/users/index.vue
, this would create a route at /users
. You can also create dynamic routes by using the _
character in the filename. For example, a file at pages/users/_id.vue
would create a dynamic route at /users/:id
, with the id
parameter available in the component.
You can also define routes manually in the nuxt.config.js
file using the router
object. This is useful if you want to define custom routes or if you want to define routes that do not follow the default naming convention. You can define routes using the routes
property of the router
object. Each route is an object with a path
and a component
property. The path
property is the URL of the route, and the component
property is the Vue component that should be rendered when the route is accessed.
In addition to defining routes, Nuxt.js also provides several other routing features, such as middleware, async data, and navigation guards. Middleware allows you to define custom logic that should be run before rendering a route. Async data allows you to fetch data asynchronously before rendering a route. Navigation guards allow you to define custom logic that should be run before navigating to a new route. These features can all be used to create powerful and flexible routing in your Nuxt.js application.
Guillaume Duhan