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. Para mostrar estas páginas precisamos de um roteador.

Rotas Automáticas

A maioria dos sítios da Web terão mais do que uma página (ou seja, uma página inicial, página sobre, uma página de contacto, etc). Para mostrar estas páginas, precisamos de um roteador. É aí que entra a vue-router. Quando trabalhamos com a aplicação de Vue, temos de definir um ficheiro de configuração (ou seja, router.js) e adicionar todas as nossas rotas manualmente. A Nuxt gera automaticamente a configuração da vue-router por nós, baseada nos nossos ficheiros .vue fornecidos dentro do diretório pages. Isto significa que nunca mais teremos de escrever uma configuração de roteador! A Nuxt também dá-nos a divisão automática de códigos para todas as nossas rotas.

Em outras palavras, tudo o que temos que fazer para ter roteamento na nossa aplicação é criar ficheiros .vue na pasta pages.

Navegação

Para navegar entre as páginas da nossa aplicação, devemos utilizar o componente NuxtLink . Este componente é incluído com a Nuxt, pelo que não temos de o importar como fazemos com outros componentes. É semelhante ao marcador da HTML <a>, exceto que em vez de utilizar href="/about" utilizamos to="/about". Se já utilizamos a vue-router antes, podemos pensar no <NuxtLink> como um substituto para o <RouterLink>.

Uma simples hiperligação para a página index.vue na nossa pasta pages:

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

Para todas as hiperligações às páginas do nosso sítio, utilizamos <NuxtLink>. Se tivermos hiperligações a outros sítios da Web, devemos utilizar o marcador <a>. Veremos abaixo um exemplo:

<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About (internal link that belongs to the Nuxt App)
    </NuxtLink>
    <a href="https://v2.nuxt.com">External Link to another page</a>
  </main>
</template>