Custom Routes

Custom Routes example with Nuxt.js

Исходный код


Nuxt.js is based on vue-router and allows you to defined custom routes :rocket:


Add your custom routes inside nuxt.config.js:

module.exports = {
  router: {
    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' }
// ...