Le compte client et ses onglets

La page parente contient le titre, le menu et sa propre vue du routeur :

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <h1>Mon compte</h1>
  <nav aria-label="Mon compte">
    <RouterLink :to="{ name: 'compte-commandes' }">
      Mes commandes
    </RouterLink>
    <RouterLink :to="{ name: 'compte-adresse' }">
      Mon adresse
    </RouterLink>
  </nav>
  <RouterView />
</template>

Les sous-pages sont des routes enfants, aux chemins relatifs ; la route enfant de chemin vide redirige vers les commandes :

import { h } from "vue";
import PageCompte from "./PageCompte.vue";

const bloc = (texte) => ({ render: () => h("p", texte) });

export const routeCompte = {
  path: "/compte",
  component: PageCompte,
  children: [
    // /compte seul : on montre les commandes
    { path: "", redirect: { name: "compte-commandes" } },
    { path: "commandes", name: "compte-commandes", component: bloc("Vos 2 commandes…") },
    { path: "adresse", name: "compte-adresse", component: bloc("12, rue des Écoles…") },
  ],
};

Le test ouvre /compte, puis clique sur « Mon adresse », et relève le menu :

/compte/commandes → Mon compte + Vos 2 commandes…
/compte/adresse → Mon compte + 12, rue des Écoles…
<nav aria-label="Mon compte"><a href="/compte/commandes" class=""> Mes commandes </a><a href="/compte/adresse" class="router-link-active router-link-exact-active" aria-current="page"> Mon adresse </a></nav>

/compte a été redirigée vers /compte/commandes. Le titre reste affiché, seul le contenu de la vue imbriquée change, et le lien de la sous-page courante porte aria-current="page". Un lien vers /compte dans le menu principal serait, lui, marqué router-link-active sur les deux sous-pages.