.. | ||
layouts | ||
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 🚀
Concept
Nuxt.js detect and generate automatically the vue-router config according to your file tree of .vue files inside the pages
directory.
Basic routes
This file tree:
/pages
|-> /team
|-> index.vue
|-> about.vue
|-> index.vue
will automatically generate:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index'
},
{
name: 'team',
path: '/team',
component: 'pages/team/index'
},
{
name: 'team-about',
path: '/team/about',
component: 'pages/team/about'
}
]
}
Dynamic routes
To define a dynamic route with a param, you need to define a .vue file prefixed by an underscore.
This file tree:
/pages
|-> /projects
|-> index.vue
|-> _slug.vue
will automatically generate:
router: {
routes: [
{
name: 'projects',
path: '/projects',
component: 'pages/projects/index'
},
{
name: 'projects-slug',
path: '/projects/:slug',
component: 'pages/projects/_slug'
}
]
}
Additional feature : validate (optional)
Nuxt.js allows you to define a validator function inside your dynamic route component (In this example: pages/projects/_slug.vue
).
If validate function fails, Nuxt.js will automatically load the 404 error page.
<script>
export default {
validate ({ params }) {
return /^[A-z]+$/.test(params.slug)
}
}
</script>
Nested Routes (children)
To define a nested route, you need to define a .vue file with the same name as the directory which contain your children views.
Don't forget to put
<nuxt-child></nuxt-child>
inside your parent .vue file.
This file tree:
/pages
|-> /users
|-> _id.vue
|-> users.vue
will automatically generate:
router: {
routes: [
{
path: '/users',
component: 'pages/users',
children: [
{
path: ':id',
component: 'pages/users/_id',
name: 'users-id'
}
]
}
]
}
Dynamic Nested Routes
This file tree:
/pages
|-> /posts
|-> /_slug
|-> _name.vue
|-> comments.vue
|-> _slug.vue
|-> index.vue
|-> posts.vue
will automatically generate:
router: {
routes: [
{
path: '/posts',
component: 'pages/posts',
children: [
{
path: "",
component: 'pages/posts/index',
name: 'posts'
},
{
path: ':slug',
component: 'pages/posts/_slug',
children: [
{
path: 'comments',
component: 'pages/posts/_slug/comments',
name: 'posts-slug-comments'
},
{
path: ':name',
component: 'pages/posts/_slug/_name',
name: 'posts-slug-name'
}
]
}
]
}
]
}
Demo
npm install
npm start
Go to http://localhost:3000 and navigate through the pages.