As diferentes rotas no Nuxt

Nuxt.js é uma estrutura de aplicativo da web gratuita e de código aberto baseada em Vue.js, Node.js, Webpack e Babel.js. O framework é anunciado como um "meta-framework para aplicações universais"

Ele trabalha com rotas baseadas em arquivos, mas podemos muito bem alterar esse comportamento e veremos isso agora.

<Nuxt /> & <NuxtChild />

Antes de tudo, precisamos entender esses dois componentes primeiro.

<Nuxt />

Vamos começar pelo <Nuxt />. Que só pode ser usado pelos layouts da nossa aplicação.

Pra quem já trabalhou com Vue Router, sabe que existe o <router-view> que é usado para indicar onde as rotas serão renderizadas. O <Nuxt /> serve para o mesmo propósito. Ele indica onde as rotas da nossa aplicação Nuxt serão renderizadas.

<template>
  <div>
    <div>Top Bar</div>
    <Nuxt />
    <div>Footer</div>
  </div>
</template>

<NuxtChild />

Como você já deve ter imaginado, o <NuxtChild /> serve para indicarmos onde as rotas aninhadas serão renderizadas. Exemplo:

-| pages/
---| parent/
-----| child.vue
---| parent.vue

Vai gerar as seguintes rotas:

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

Então para renderizar a rota para child.vue dentro de parent.vue, inserimos o <NuxtChild /> em parent.vue:

<template>
  <div>
    <h1>Eu sou a página "parent" passando props "foobar" para a rota filha</h1>
    <NuxtChild :foobar="123" />
  </div>
</template>

Bem, agora que já sabemos o propósito desses dois componentes, vamos às diferentes formas de rotas do Nuxt.

Padrão

Definindo rotas

Por padrão, o Nuxt trabalha lendo a estrutura do diretório pages. Portanto, se a nossa estrutura de diretórios for:

Parâmetros

Para definir um parâmetro, é criado um arquivo com undescore antes do nome do parâmetro:

Pra usar o parâmetro na nossa página, basta acessar a $route.params:

<script>
export default {
  async fetch() {
    this.user = await this.$axios.get(`/api/users/${this.$route.params.username}`)
  },
  data() {
    return {
      user: null
    }
  }
}
</script>

Nuxt Router Extras

Uma das coisas mais legais do NuxtJS é o seu ecosistema de módulos. Existem inúmeros módulos que mudam ou complementam o comportamento do NuxtJS. Entre eles, existe o Router Extras. Ele nos permite criar as rotas de uma maneira um pouco diferente do padrão do NuxtJS.

Vamos primeiramente instalar o Router Extras:

npm i -D @nuxtjs/router-extras

Feito isso, precisamos agora dizer ao Nuxt para usá-lo. Ele é um módulo que trabalha no momento do build do Nuxt, então declaramos na configuração buildModules:

export default {
  buildModules: [
    '@nuxtjs/router-extras'
  ]
}

Pronto, só isso. Agora podemos usá-lo a vontade. Simples né? Essa é a maravilha de se trabalhar com Nuxt

Definindo rotas

Como falei, com Router extras é um pouco diferente. Agora a gente vai definir as rotas, dentro dos arquivos das páginas entre as tags <router></router>

<router>
{
  path: '/users/{username}
}
</router>
<template>
  <div>...</div>
</template>
<script>
export default {
  ...
}
</script>

Alias e props

É possível definir também alias e props para os alias:

<router>
 {
    path: '/posts',
    alias: [
      '/articles',
      '/blog'
    ]
 }
</router>

Nota: Para saber mais, basta acessar Router Extras

@nuxtjs/router

Esse módulo traz o já conhecido método de definir rotas através de um arquivo *.js que comumente também chamamos de router.js ou routes.js.

Para usar basta seguir aquele método complicado:

npm i -D @nuxtjs/router

e

export default {
  buildModules: [
    '@nuxtjs/router'
  ]
}

export default {
  generate: {
    routes: [
      '/'
    ]
  }
}

Definindo rotas

Por padrão, o @nuxtjs/router vai atrás do arquivo router.js em @/router.js onde @ é o alias do srcDir do NuxtJS, que por padrão é a raiz do projeto (Você pode mudar isso definindo outro path para srcDir em nuxt.config.js).

O arquivo router.js tem que exportar a função createRouter por padrão:

import Vue from 'vue'
import Router from 'vue-router'

import UserPage from '~/pages/users/user.vue'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/users/{user}',
        component: UserPage
      }
    ]
  })
}

Pronto, agora a partir daqui o @nuxtjs/router trabalha da mesma forma que o vue-router que você já deve ter ouvido falar por aí.

Configurações

Existem mais outras opções pra se configurar no @nuxtjs/router, dá uma olhada aqui

Muito mais

Existem diversos recursos incríveis e fáceis de usar no roteamento do Nuxt.

• Podemos criar transições globais e por página entre as rotas de forma fácil
• Podemos ter rotas aninhadas dinamicamente
• Podemos ter uma página que recebe rotas que existem mas que não tem um padrão: pages/_.vue
• Podemos criar uma extensão das rotas geradas pelo Nuxt
• Podemos definir um prefixo para todas as rotas
• Podemos configurar o modo como as rotas funcionarão
• Podemos implementar nossa própria função para interpretar os query params
• Podemo mudar o separador de rotas, se você quiser mudar o jeito que o Nuxt cria o nome da s rotas
• Podemos definir o comportamento do scroll nas mudanças de rotas. Ele salva pra você a posição da rota anterior
• Podemos inserir o trailing slash (#) que por padrão é removido