Pages et routage

Ce que tu vas apprendre

• Transformer un fichier en page, et un dossier en morceau d'adresse.
• Créer une page dynamique qui sert toutes les recettes : /recettes/1, /recettes/2...
• Passer d'une page à l'autre sans recharger, avec <NuxtLink>.
• Partager un en-tête et un pied de page entre toutes les pages.

Un fichier, une adresse

Tout fichier .vue placé dans app/pages/ devient une page. Son chemin donne l'adresse :

Le mot index veut dire « la page du dossier lui-même ». Pour que les pages s'affichent, app/app.vue contient le composant <NuxtPage /> : c'est l'emplacement où Nuxt place la page demandée.

<template>
  <NuxtPage />
</template>

Les pages dynamiques

Ton site aura des dizaines de recettes. Tu ne vas pas écrire un fichier par recette. Les crochets dans le nom de fichier créent un paramètre : [id].vue accepte n'importe quelle valeur à cet endroit de l'adresse.

Dans la page, useRoute() donne accès à l'adresse en cours, et params.id à la valeur reçue :

<script setup lang="ts">
const route = useRoute()
// Pour /recettes/12, route.params.id vaut "12" (toujours une chaîne de caractères).
</script>

<template>
  <h1>Recette n° {{ route.params.id }}</h1>
</template>

Naviguer sans recharger

Un lien <a href> classique recharge la page entière. <NuxtLink> change de page dans le navigateur, sans rechargement : seul le contenu qui change est remplacé.

<template>
  <nav>
    <NuxtLink to="/">Accueil</NuxtLink>
    <NuxtLink to="/recettes">Toutes les recettes</NuxtLink>
    <NuxtLink :to="`/recettes/${recette.id}`">{{ recette.titre }}</NuxtLink>
  </nav>
</template>

Bonus : quand un <NuxtLink> apparaît à l'écran, Nuxt précharge en arrière-plan le code de la page visée. Le clic paraît instantané. Pour un lien vers un autre site, <NuxtLink> se comporte comme un lien normal.

Pour changer de page depuis le code (après l'envoi d'un formulaire, par exemple), utilise navigateTo :

async function enregistrer() {
  // ... envoi de la recette
  await navigateTo('/recettes')
}

Les gabarits (layouts)

L'en-tête et le pied de page se répètent sur toutes les pages. Plutôt que de les copier, tu les places dans un gabarit : app/layouts/default.vue. Le <slot /> marque l'endroit où la page s'insère.

<template>
  <header>Mes recettes</header>
  <main>
    <slot />
  </main>
  <footer>Fait avec Nuxt</footer>
</template>

Pour activer les gabarits, app.vue entoure la page avec <NuxtLayout> :

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Une page peut choisir un autre gabarit avec definePageMeta. Ici, la page d'administration utilise app/layouts/admin.vue :

<script setup lang="ts">
definePageMeta({ layout: 'admin' })
</script>

À retenir

• Un fichier de app/pages/ est une page ; son chemin donne l'adresse.
• [id].vue crée une page dynamique ; useRoute().params.id lit la valeur (une chaîne).
• <NuxtLink> navigue sans recharger et précharge la page visée ; navigateTo() fait la même chose depuis le code.
• Les éléments communs vont dans app/layouts/, avec <slot /> pour la page.