Integrazione Vue: Documentazione di usePathname

La funzione usePathname restituisce il percorso corrente (pathname) del browser con il segmento della locale rimosso, sotto forma di ComputedRef<string> in Vue. È utile per costruire una navigazione che tenga conto della locale — per esempio, per determinare quale elemento di navigazione è attivo — senza dover rimuovere manualmente il prefisso della locale.

Importare usePathname in Vue

import { usePathname } from "vue-intlayer";

Panoramica

usePathname crea un riferimento calcolato (computed ref) di Vue che legge da window.location.pathname, rimuove il prefisso della locale tramite getPathWithoutLocale, e aggiorna il suo valore ogni volta che il browser scatena un evento popstate (navigazione indietro/avanti). Il valore può essere utilizzato direttamente nei template o nelle funzioni di setup di Vue.

Utilizzo

<script setup lang="ts">
import { usePathname } from "vue-intlayer";

const props = defineProps<{
  href: string;
  label: string;
}>();

const pathname = usePathname();
</script>

<template>
  <a :href="href" :aria-current="pathname === href ? 'page' : undefined">
    {{ label }}
  </a>
</template>

Valore Restituito

Comportamento

• Rimozione della locale: Rimuove il segmento iniziale della locale (es. /it/dashboard → /dashboard).
• Reattività: Aggiorna il valore a ogni evento popstate (navigazione indietro / avanti del browser).
• Sicuro in SSR: Restituisce "" quando window non è disponibile.
• Pulizia (Cleanup): L'event listener popstate viene aggiunto globalmente all'inizializzazione e normalmente non richiede pulizia manuale per singolo componente, grazie a come Vue gestisce il ciclo di vita.

Esempio

<script setup lang="ts">
import { usePathname } from "vue-intlayer";

const links = [
  { href: "/dashboard", label: "Dashboard" },
  { href: "/settings", label: "Impostazioni" },
];

const pathname = usePathname();
</script>

<template>
  <nav>
    <a
      v-for="link in links"
      :key="link.href"
      :href="link.href"
      :style="{ fontWeight: pathname === link.href ? 'bold' : 'normal' }"
    >
      {{ link.label }}
    </a>
  </nav>
</template>

Correlati

• useLocale — locale corrente + selettore della locale
• getPathWithoutLocale — l'utilità di base usata da questo hook