BLACK FRIDAY - Get 35% off your Mastering Nuxt license!

Routage

Routes automatiques

La plupart des sites Web possèdent plus d'une page (comme une page d'accueil, une page à propos, une page de contact, etc.). Pour afficher ces pages, nous avons besoin d'un routeur. C'est là qu'intervient vue-router.

Lorsque nous travaillons avec Vue, nous devons configurer un fichier de configuration (comme router.js) et y ajouter manuellement toutes nos routes. Nuxt.js génère automatiquement la configuration vue-router pour nous, en fonction des fichiers Vue fournis dans le répertoire pages.

Cela signifie que nous n'avons plus jamais besoin d'écrire une configuration de routeur ! Nuxt.js nous offre également le découpage dynamique de code pour toutes nos routes.

En d'autres termes, tout ce que nous avons à faire pour avoir un routage dans notre application est de créer des fichiers .vue dans le répertoire pages.

En savoir plus sur le Routage

Pour naviguer entre les pages de notre application, nous devons utiliser le composant NuxtLink. Ce composant est inclus avec Nuxt.js et nous n'avons donc pas à l'importer comme on le fait avec d'autres composants.

Il est similaire à la balise HTML <a>, mais à la place d'utiliser un attribut href="/about", nous utilisons to="/about". Si nous avons déjà utilisé vue-router, nous pouvons comparer <NuxtLink> au composant <RouterLink>.

Voici un exemple de l'utilisation du composant NuxtLink avec un lien vers la page index.vue dans le répertoire pages :

pages/index.vue
<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

Pour tous liens vers des pages de notre site, il faut utiliser <NuxtLink>. Si nous avons des liens vers d'autres sites Web, nous devons utiliser la balise <a> comme ci-dessous :

pages/index.vue
<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About (lien interne vers une page appartenant à notre application Nuxt)
    </NuxtLink>
    <a href="https://nuxtjs.org">Lien vers une page externe</a>
  </main>
</template>

En savoir plus sur le composant NuxtLink.

Contributeurs

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !

Platinum Sponsors

StoryblokMoovweb Support Us