Roteamento

A maioria dos sítios da web têm mais que uma página. Por exemplo uma página inicial, uma página sobre, página de contacto etc. No sentido de exibir essas paginas nós precisamos de um Roteador.

Rotas automáticas

A maioria dos websites irão ter mais que uma página (por exemplo página inicial, página sobre, formas de contato etc.). Para mostrar essas paginas nós precisamos de um Router. É aonde o vue-router entra. Quando se trabalha com aplicações Vue, você tem que iniciar o arquivo de configuração (exemplo router.js) e adicionar todas as rotas manualmente nele. O Nuxt gera automaticamente as configurações do vue-router para você, com base nos ficheiros de Vue dentro da pasta pages. Isso significa que você nunca mais terá que escrever as configurações do roteador! O Nuxt também oferece para você a separação automática de código para todas suas rotas.

Em outras palavras, tudo o que você tem que fazer para ter uma rota na sua aplicação é criar ficheiros .vue dentro da pasta pages.

Navegação

Para navegar entre as páginas da sua aplicação, você deve usar o componente NuxtLink . Esse componente é incorporado no Nuxt, portanto você não tem que importar ele assim como você faz com os outros componentes. É similar ao marcador <a> do HTML, exceto que ao invés de usar um href="/about" nós usamos to="/about". Se você já usou vue-router antes, você pode pensar no componente <NuxtLink> como uma substituto do componente <RouterLink>.

Uma simples ligação para a página index.vue dentro da sua pasta pages:

<template>
  <NuxtLink to="/">Página inicial</NuxtLink>
</template>

Para todas ligações para as páginas dentro do seu sítio, use <NuxtLink>. Se você tiver ligações para outros sítios na web você deve usar o marcador <a>. Para ter uma ideia consulte o exemplo abaixo:

<template>
  <main>
    <h1>Página Inicial</h1>
    <NuxtLink to="/about">
      Sobre (ligação interna que pertence a aplicação do Nuxt)
    </NuxtLink>
    <a href="https://nuxtjs.org">Ligação externa para outra página</a>
  </main>
</template>