javascript - 如何在 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 事件的方法。使用该事件，我们可以捕获当前的 pathname的网址。这允许我们检查 pathname针对我们的 item.path这是在我使用 #each 导入和提取的 nav.json 文件中定义的我们的html中的方法。关于<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 是一个简单的速记，删除那里的三元表达式。