Nuxt/examples/custom-routes

Defining custom routes with Nuxt.js

Nuxt.js is based on vue-router and let you to defined custom routes easily 🚀

Concept

Nuxt.js generates automatically the vue-router configuration 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.vue'
    },
    {
      name: 'team',
      path: '/team',
      component: 'pages/team/index.vue'
    },
    {
      name: 'team-about',
      path: '/team/about',
      component: 'pages/team/about.vue'
    }
  ]
}

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/
--| users/
-----| _id.vue
-----| index.vue

will automatically generate:

router: {
  routes: [
    {
      name: 'users',
      path: '/users',
      component: 'pages/users/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id',
      component: 'pages/users/_id.vue'
    }
  ]
}

Additional feature: validate (optional)

Nuxt.js lets you define a validator function inside your dynamic route component (In this example: pages/users/_id.vue).

If the validate method does not return true, Nuxt.js will automatically load the 404 error page.

<script>
export default {
  validate ({ params }) {
    return /^\d+$/.test(params.id)
  }
}
</script>

Nested Routes (children)

To define a nested route, you need to create 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.vue',
      children: [
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          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.vue',
      children: [
        {
          path '',
          component: 'pages/posts/index.vue',
          name: 'posts'
        },
        {
          path: ':slug',
          component: 'pages/posts/_slug.vue',
          children: [
            {
              path: 'comments',
              component: 'pages/posts/_slug/comments.vue',
              name: 'posts-slug-comments'
            },
            {
              path: ':name',
              component: 'pages/posts/_slug/_name.vue',
              name: 'posts-slug-name'
            }
          ]
        }
      ]
    }
  ]
}

Demo

npm install
npm start

Go to http://localhost:3000 and navigate through the pages.