如何在 sveltekit 应用程序中将菜单项设置为活动状态

Question

我一直在开发 sveltekit 应用程序，最近我的主导航菜单遇到了问题。当加载或刷新应用程序时，与当前 URL 对应的当前菜单项不会设置为活动状态。（即菜单项“Home”的 URL 为“/”）我很难在网上找到任何有用的东西来演示如何设置它，但我有一个可行的解决方案，并认为我会为其他人记录它。目前很简单。

我有一个 nav.json 文件，我在其中定义应用程序中的任何菜单，从而可以轻松组织菜单。我将其导入到文件顶部并将其存储在数组中以供以后使用。

import menuObj from '../nav/nav.json';

let sidebar = menuObj.menus[0].items;

onMount()只是在加载导航组件时获取当前路径，并且只为我运行一次。

然后 - 使用<svelte:window on:click={handlePageClick}/>我们可以监听页面上的任何点击。

在该handlePageClick(e)方法中我们传递 on:click 事件。使用该事件我们可以捕获当前pathname的 URL。这允许我们检查pathname我使用 html 中的方法item.path导入和提取的 nav.json 文件中定义的内容。如果项目路由与当前路径匹配，我们可以将类设置为活动状态#each。<a>

这是完整的实现

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

我还没有发现这有什么缺点。如果我发现任何东西，我会更新这个问题。

Answer 1

这不是一个真正的问题，但无论如何我都会添加一个答案，因为你的方法不是必需的，SvelteKit 已经有一个内置系统：

<script>
 import { page } from '$app/stores';
</script>

<a href={item.route} class="item" class:active={$page.url.pathname == item.route}>
 ...
</a>

page是一个类似商店的对象，其中包含当前路径，它将自动更新为新路径

作为奖励：

class:active是一个简单的简写，删除了那里的三元表达式。