Estoy probando el primer proyecto con Svelte y tengo una situación como esta:
Obtengo una lista de resultados de una API como aquí:
# Page with a list of items <script context="module"> export const load = async ({ page, fetch }) => { const res = await fetch(`url`); const items = await res.json(); return { props: { items, }, }; }; </script> <script> export let items; </script> {#each items.data as { id, item, href }} <li> <a href="/page/{href}">{ item }</a> </li> {/each} Estoy tratando de pasar múltiples parámetros a la siguiente ruta (dinámica) para que href sea el slug e id sea la id para obtener los detalles del elemento de la API como aquí:
# Page with a single item <script context="module"> export const load = async ({ page, fetch }) => { const slug = page.params.slug; <-- I can get this const res = await fetch(`url/${page.id}`); <-- but not this const data = await res.json(); return { props: { data, }, }; }; </script>Pido disculpas por mi ignorancia, pero realmente estoy luchando y no sé cómo abordar esto exactamente. Agradecería cualquier pista.
Hay dos opciones para esto
Una es tener un segundo 'slug', esto significaría que tiene una estructura de archivo como /page/[slug]/[id].svelte , en ese caso simplemente puede hacer const { slug, id } = page.params; y su ancla se convierte en <a href="/page/{href}/{id}"> . Esto tiene la desventaja de que aún debe encontrar una forma de manejar si las personas navegan a /page/{href} sin pasar una identificación.
Otra opción es pasar el id como parámetro de consulta, aquí su ancla sería <a href="/page/{href}?id={id}"> los archivos son como los que tiene y obtiene el parámetro de consulta de la siguiente manera const id = page.query.get('id') . Aquí todavía tienes que manejar si las personas llegan a esta página sin tener una identificación, pero en ese caso la id no estará definida, por lo que quizás sea un poco más fácil de manejar.