Sistema de Roteamento de Ficheiro

O Nuxt gera automaticamente a configuração do vue-router baseado na sua árvore de ficheiro de ficheiros Vue dentro do diretório pages. Sempre que você criar um ficheiro .vue dentro do seu diretório pages você terá o roteamento básico funcionando sem a necessidade de configurações extras.

Algumas vezes você pode precisar criar rotas dinâmicas ou rotas aninhadas ou você pode precisar avançar para configurar a propriedade router. Este capítulo irá através de tudo que você precisa saber no sentido de tirar o melhor proveito do seu roteador.

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

Rotas Básicas

Esta árvore de ficheiro:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

automaticamente gerará:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Rotas Dinâmicas

Algumas vezes não é possível saber o nome da rota tal como quando fazemos uma chamada para uma API para receber uma lista de usuários ou publicações de um blogue. Nós chamamos esses de rotas dinâmicas. Para criar uma rota dinâmica você precisa adicionar um sublinhado (_) antes do nome do ficheiro .vue ou antes do nome do diretório. Você pode nomear o ficheiro ou diretório com o que você quiser mas você deve prefixar ele com sublinhado.

Esta árvore de ficheiro:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

automaticamente gerará:

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

Acessando Localmente Parâmetros de Rota

Você pode acessar os parâmetros da rota atual dentro da sua página local ou componente ao referenciar this.$route.params.{parameterName}. Por exemplo, se você tinha uma página de usuários dinâmica (users/_id.vue) e quis acessar o parâmetro id para carregar o usuário ou processar informações, você poderia acessar a variável como: this.$route.params.id.

Rotas Aninhadas

O Nuxt permite você criar rotas aninhadas ao usar rotas filhas do vue-router. Para definir o componente pai de uma rota alinhada, você precisa criar um ficheiro Vue com o mesmo nome que o diretório o qual contém suas views filhas.

Esta árvore de ficheiro:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

automaticamente gerará:

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

Rotas Dinâmicas Aninhadas

Este não é um quadro comum, mas é possível com o Nuxt ter filhos dinâmicos dentro de pais dinâmicos.

Esta árvore de ficheiro:

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

automaticamente gerará:

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

Rotas Dinâmicas Aninhadas Desconhecidas

Se você não sabe a profundidade da sua estrutura de URL, você pode usar _.vue para casar dinamicamente caminhos aninhados. Isto irá manipular requisições que não casarem uma rota mais específica.

Esta árvore de ficheiro:

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

automaticamente gerará:

/ -> index.vue
/people -> people/index.vue
/people/123 -> people/_id.vue
/about -> _.vue
/about/careers -> _.vue
/about/careers/chicago -> _.vue

Estendendo o Roteador

Há várias maneiras de estender o roteamento com o Nuxt:

• router-extras-module para personalizar os parâmetros dentro da página
• componente @nuxtjs/router para sobrescrever o router do Nuxt e escrever seu próprio ficheiro router.js
• Usar a propriedade router.extendRoutes dentro do seu nuxt.config.js

A Propriedade router

A propriedade router permite você personalizar o router do Nuxt (vue-router).

export default {
  router: {
    // personalize o router do Nuxt
  }
}

Base:

A URL base da aplicação. Por exemplo, se a aplicação de página única inteira estiver servida debaixo de /app/, então a base deve usar o valor '/app/'.

extendRoutes

Você pode querer estender as rotas criadas pelo Nuxt. Você pode fazer então via opção extendRoutes.

Exemplo de adição de uma rota personalizada:

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

Se você quiser organizar suas rotas, você pode usar a função sortRoutes(routes) do @nuxt/utils:

import { sortRoutes } from '@nuxt/utils'
export default {
  router: {
    extendRoutes(routes, resolve) {
      // Adicione algumas rota aqui ...

      // e depois organize elas
      sortRoutes(routes)
    }
  }
}

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // or routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}

fallback

Controla se a roteador deveria recuar para o modo hash quando o browser não suportar o history.pushState mas o modo está definido para history.

mode

Configura o modo do roteador, não é recomendado mudar ele por causa da renderização do lado do servidor.

parseQuery / stringifyQuery

Fornece as funções parse / stringify da string de consulta personalizada

routeNameSplitter

Você pode querer mudar o separador entre os nomes de rota que o Nuxt usa. Você pode fazer isso via a opção routeNameSplitter dentro do seu ficheiro de configuração. Imagine que nós temos ao ficheiro de página pages/posts/_id.vue. O Nuxt gerará a nome da rota programaticamente, neste caso posts-id. Mudando a configuração do routerNameSplitter para / o nome irá portanto mudar para posts/id.

export default {
  router: {
    routeNameSplitter: '/'
  }
}

scrollBehavior

A opção scrollBehavior permite você definir um comportamento personalizado para a posição da rolagem entre as rotas. Este método é chamado toda vez que a página é renderizada.

Disponível desde a versão 2.9.0:

No Nuxt você pode usar o ficheiro para sobrescrever o scrollBehavior do router. Este ficheiro deve ser posto dentro da uma pasta chamada app.

~/app/router.scrollBehavior.js.

Exemplo de como forçar a posição da rolagem para o topo de toda rota:

export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

trailingSlash

Disponível desde a versão: 2.10

Se este opção estiver definida para true, rastros de barras serão somados a toda rota. Se definida para false, eles serão removidos,

export default {
  router: {
    trailingSlash: true
  }
}