Le numéro de page dans l'adresse

<script setup>
import { computed } from "vue";
import { RouterLink, useRoute } from "vue-router";

const props = defineProps({
  livres: { type: Array, required: true },
  parPage: { type: Number, default: 2 },
});

const route = useRoute();
const nombrePages = computed(() => Math.max(1, Math.ceil(props.livres.length / props.parPage)));

// ?page=2 est une CHAÎNE ; ?page=abc, ?page=0 ou ?page=99 ramènent dans les bornes.
const page = computed(() => {
  const n = Number.parseInt(route.query.page ?? "1", 10);
  if (Number.isNaN(n)) return 1;
  return Math.min(Math.max(n, 1), nombrePages.value);
});

const livresDeLaPage = computed(() =>
  props.livres.slice((page.value - 1) * props.parPage, page.value * props.parPage),
);

// Garde les autres réglages de la requête (recherche, tri…).
const vers = (n) => ({ query: { ...route.query, page: n === 1 ? undefined : n } });
</script>

<template>
  <ul>
    <li
      v-for="livre in livresDeLaPage"
      :key="livre.isbn"
    >
      {{ livre.titre }}
    </li>
  </ul>
  <nav aria-label="Pages">
    <RouterLink
      v-if="page > 1"
      :to="vers(page - 1)"
    >
      Page précédente
    </RouterLink>
    <span>Page {{ page }} sur {{ nombrePages }}</span>
    <RouterLink
      v-if="page < nombrePages"
      :to="vers(page + 1)"
    >
      Page suivante
    </RouterLink>
  </nav>
</template>

Avec cinq livres, le test part de /livres?q=a, clique deux fois sur « Page suivante », puis essaie trois adresses fantaisistes :

/livres?q=a → Java, Algorithmique | Page 1 sur 3 Page suivante
/livres?q=a&page=2 → Analyse, Physique | Page précédente Page 2 sur 3 Page suivante
/livres?q=a&page=3 → Le Petit Prince | Page précédente Page 3 sur 3
/livres?page=abc → Java, Algorithmique | Page 1 sur 3 Page suivante
/livres?page=99 → Le Petit Prince | Page précédente Page 3 sur 3
/livres?page=0 → Java, Algorithmique | Page 1 sur 3 Page suivante

La requête q=a est conservée par les liens, la page 1 est omise de l'adresse, et les valeurs absurdes sont ramenées dans les bornes au lieu de produire une page vide.