He estado trabajando en una aplicación sveltekit y recientemente encontré un problema con mi menú de navegación principal. cuando la aplicación se carga o se actualiza, el elemento de menú actual que corresponde a la URL actual no se configura como activo. (es decir, el elemento de menú 'Inicio' tendría la URL de '/') Me costó mucho encontrar algo útil en línea que demuestre cómo configurar esto, pero tengo una solución que funciona y pensé en documentarlo para otros. Es muy simple en este momento.
Tengo un archivo nav.json donde defino cualquier menú dentro de mi aplicación, lo que facilita la organización de los menús. Lo importo en la parte superior del archivo y lo almaceno en una matriz para usarlo más adelante.
import menuObj from '../nav/nav.json';
let sidebar = menuObj.menus[0].items;
onMount() solo obtiene la ruta actual cuando se carga el componente de navegación, y solo se ejecuta una vez para mí.
luego, usando <svelte:window on:click={handlePageClick}/> podemos escuchar cualquier clic en la página.
En el handlePageClick(e) pasamos el evento on:click. Usando ese evento podemos capturar el nombre de pathname actual de la URL. esto nos permite verificar el nombre de la pathname con nuestro item.path que está definido en el archivo nav.json que importé y extraje usando el método #each en nuestro html. En <a> podemos configurar la clase como activa si la ruta de los elementos coincide con la ruta actual.
aquí está la implementación completa
<script> import menuObj from '../nav/nav.json'; import {onMount} from "svelte"; let path; let sidebar = menuObj.menus[0].items; onMount(() => { path = window.location.pathname; }) function handlePageClick(e) { path = e.view.location.pathname; } </script> <svelte:window on:click={handlePageClick}/> <nav class="sidebar"> {#each sidebar as item, i} <a href={item.route} id="sidebar-menu-item-{item.id}" class={path === item.route ? "item active" : "item"} > <i id="sidebar-menu-item-{item.id}-i" class="{item.icon}"></i> </a> {/each} </nav>Todavía no he encontrado ningún inconveniente en esto. Actualizaré esta pregunta si encuentro algo.
No es realmente una pregunta, pero agregaré una respuesta de todos modos porque su método no es necesario, SvelteKit ya tiene un sistema incorporado para esto:
<script> import { page } from '$app/stores'; </script> <a href={item.route} class="item" class:active={$page.url.pathname == item.route}> ... </a>la página es un objeto similar a una tienda que, entre otras cosas, contiene la ruta actual, se actualizará automáticamente con la nueva ruta
como bono:
class:active es una abreviatura fácil, eliminando esa expresión ternaria allí.