Nuxt 3 já está disponível! Descobre mais sobre isso https://nuxt.com/v3

Translated page Contents of this page might be outdated.

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.

O Nuxt oferece a você separação automática de código para suas rotas, sem precisar de configuração
Use o componente NuxtLink para navegar entre páginas
<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'
    }
  ]
}
Como você pode ver a rota nomeada users-id tem o caminho :id? o que a torna opcional, se você quiser torna ela obrigatória, crie um ficheiro index.vue dentro do diretório users/_id.
Visto que desde o Nuxt >= v2.13 há um rastejador instalado que agora irá rastejar em suas tags de ligação e gerar suas rotas dinâmicas baseadas naquelas ligações. No entanto se você tiver páginas que não estão ligadas tais como uma página secreta, então você precisará manualmente gerar aquelas rotas dinâmicas.

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.

Não esqueça de incluir o componente NuxtChild dentro do componente pai (ficheiro .vue).

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
Manipulação de páginas 404 agora sobre a lógica da página _.vue.

Estendendo o Roteador

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

A Propriedade router

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

nuxt.config.js
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:

nuxt.config.js
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:

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

      // e depois organize elas
      sortRoutes(routes)
    }
  }
}
O estrutura de rotas deve respeitar a estrutura do vue-router .
Quando estiver adicionando rotas que usam Views Nomeadas , não esqueça de adicionar chunkNames correspondente dos components nomeados.
nuxt.config.js
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.

nuxt.config.js
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:

app/router.scrollBehavior.js
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,

nuxt.config.js
export default {
  router: {
    trailingSlash: true
  }
}
Esta opção não deve ser definida sem preparação e ter sido testado cuidadosamente. Quando estiver definindo router.trailingSlash para alguma coisa diferente de undefined (o qual é o valor padrão), a rota oposta irá parar de funcionar. Assim redireções 301 devem estar no lugar e sua ligação interna tem de ser adaptada corretamente. Se você definir trailingSlash para true, só assim o example.com/abc/ irá funcionar mas não example.com/abc. No false, é vice-versa.
Edit this page on GitHub Updated at Wed, Feb 1, 2023