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

Question

我一直在开发一个 sveltekit 应用程序，最近在我的主导航菜单上遇到了问题。当应用程序加载或刷新时，与当前 URL 对应的当前菜单项未设置为活动。 （即菜单项“主页”的 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 事件。使用该事件，我们可以捕获 URL 的当前pathname。这允许我们检查pathname 和item.path，该item.path 定义在我使用html 中的#each 方法导入和提取的nav.json 文件中。在 <a> 上，如果 items 路由与当前路径匹配，我们可以将类设置为 active。

这里是完整的实现

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

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

作为奖励：

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