Saltar al contenido
Meeko
Escribe para buscar en las guías y en la referencia de la API. Ábrela desde cualquier página con / o Ctrl K; muévete con las flechas y entra con Intro.
Empezar

Contenidos

En esta página

MeekoLinkProps

interfaz Desde 1.4.0

Props de la etiqueta propia <MeekoLink>, que renderiza un <a> cuyo href construye href. to es el ID de la ruta; params y search se escriben con bind:; match elige si el enlace está activo sólo en su ruta o también por debajo (desde 1.5.0). El resto de atributos (class, target, aria-*, on:click…) y el contenido pasan al <a>; un aria-current propio gana a la ruta, false lo quita y null o undefined dejan decidir a la ruta (desde 1.8.0). El editor muestra estas props en el hover de la etiqueta y lleva aquí con «Ir a definición». Sólo es un tipo: sirve, por ejemplo, para un componente que envuelve <MeekoLink>. Se autoimporta en app/ y en los componentes, como AppCardProps; un tipo propio del proyecto con el mismo nombre tiene prioridad.

ts
import type { MeekoLinkProps } from "@meekojs/meeko/framework";

Código fuente src/framework.ts:244

Declaración #

ts
interface MeekoLinkProps<K extends RouteId = RouteId> {
	readonly to: K
	readonly params?: RouteParams<K>
	readonly search?: Readonly<Record<string, string | number | boolean | null | undefined>>
	readonly match?: 'exact' | 'prefix'
	readonly resolve?: boolean
}

Parámetros de tipo #

K extends RouteId = RouteId

ID de la ruta, como "/users/[id]".

Ejemplo #

meeko
<script lang="ts">
import type { MeekoLinkProps } from "@meekojs/meeko/framework";
const props = defineProps<{ link: MeekoLinkProps<"/users/[id]">; label: string }>();
</script>
<template>
  <MeekoLink to="/users/[id]" bind:params="props.link.params">{props.label}</MeekoLink>
</template>

Propiedades #

to #

propiedad sólo lectura

readonly to: K

ID de la ruta de destino, como to="/users/[id]": sólo las rutas que existen. También admite una expresión con bind:to.

params #

propiedad sólo lectura opcional

readonly params?: RouteParams<K>

Parámetros de una ruta dinámica, con bind:params="{ id: user.id }". Son obligatorios en las rutas con segmentos dinámicos y no se admiten en las demás.

propiedad sólo lectura opcional

readonly search?: Readonly<Record<string, string | number | boolean | null | undefined>>

Query string, con bind:search="{ tab: 'perfil' }". Omite null y undefined.

match #

propiedad sólo lectura opcional desde 1.5.0

readonly match?: 'exact' | 'prefix'

Cuándo el enlace está activo. "exact" (por defecto): sólo en su ruta, con aria-current="page". "prefix": también en las rutas por debajo, por segmentos completos (/dashboard cubre /dashboard/stats, no /dashboards), con aria-current="true", la sección actual; en su propia ruta sigue siendo "page". to="/" sólo coincide exacta. Se escribe match="prefix" o bind:match.

resolve #

propiedad sólo lectura opcional desde 1.8.0

readonly resolve?: boolean

Si el href pasa por los resolvedores de enlaces de la aplicación (app.resolveLink de un plugin o módulo, como el prefijo de idioma de @meekojs/i18n). true por defecto; bind:resolve="false" deja el href tal como lo construye href(). El atributo hreflang del enlace llega al resolvedor, que puede usarlo para elegir otro idioma.

Véase también #

¿Te sirvió esta página?

Añadir un comentario

Se envía al elegir «Sí» o «No». Solo se guardan la página, tu respuesta y el comentario: ni cookies ni datos tuyos.

0 de 2000 caracteres

Editar en GitHub: packages/meeko/src/framework.ts