Integración con Vue: Documentación de usePathname

La función usePathname devuelve la ruta actual (pathname) del navegador con el segmento de la locale eliminado, como un ComputedRef<string> de Vue. Es útil para construir navegación con conocimiento de la locale (por ejemplo, para determinar qué elemento de navegación está activo) sin tener que eliminar el prefijo de la locale manualmente.

Importar usePathname en Vue

import { usePathname } from "vue-intlayer";

Visión General

usePathname crea una referencia calculada (computed ref) de Vue que lee window.location.pathname, elimina el prefijo de la locale mediante getPathWithoutLocale y actualiza su valor cada vez que el navegador dispara un evento popstate (navegación atrás/adelante). El valor se puede usar directamente en los templates de Vue o funciones setup.

Uso

<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>

Valor de Retorno

Comportamiento

• Eliminación de Locale: Remueve el segmento inicial de locale (ej. /es/dashboard → /dashboard).
• Reactivo: Actualiza su valor en cada evento popstate (navegación atrás / adelante en el navegador).
• Seguro en SSR: Devuelve "" cuando window no está disponible.
• Limpieza (Cleanup): El event listener de popstate se añade de manera global al inicializar y por lo general no requiere limpieza manual por componente, gracias a cómo Vue maneja el ciclo de vida.

Ejemplo

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

const links = [
  { href: "/dashboard", label: "Panel de control" },
  { href: "/settings", label: "Ajustes" },
];

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>

Relacionado