.. | ||
pages | ||
nuxt.config.js | ||
package.json | ||
README.md |
Defining custom routes with Nuxt.js
Nuxt.js is based on vue-router and allows you to defined custom routes 🚀
Usage
Add your custom routes inside nuxt.config.js
:
module.exports = {
routes: [
{ path: '/users/:id', component: 'pages/user' }
]
}
| key | Optional? | definition |
|------|------------|
| path
| Required | Route path, it can have dynamic mapping, look at vue-router documentation about it. |
| component
| Required | Path to the .vue
component, if relative, it has to be from the app folder. |
| name
| Optional | Route name, useful for linking to it with <router-link>
, see vue-router documentation about it. |
| meta
| Optional | Let you add custom fields to get back inside your component (available in the context via route.meta
inside data
and fetch
methods). See vue-router documentation about it. |
| children
| Optional | Not supported |
Hidden pages
If you want don't want nuxt.js to generate a route for a specific page, you just have to rename it with _ at the beginning.
Let's say I have a component pages/user.vue
and I don't want nuxt.js to create the /user
. I can rename it to pages/_user.vue
and voilà!
You can then change the component path in the nuxt.config.js
:
// ...
{ path: '/users/:id', component: 'pages/_user' }
// ...
Demo
npm install
npm start
Go to http://localhost:3000 and navigate through the pages.