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

Question

我一直在开发一个sveltekit应用程序，最近我的主导航菜单遇到了问题。 加载或刷新应用程序时，与当前 URL 对应的当前菜单项未设置为活动。(即菜单项"主页"的网址为"/")我很难在网上找到任何有用的东西来演示如何设置它，但我有一个可行的解决方案，我想我会为其他人记录下来。目前非常简单。

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

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

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

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

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

在handlePageClick(e)方法中，我们传递 on：click 事件。使用该事件，我们可以捕获URL的当前pathname。这使我们能够根据我在 html 中使用#each方法导入和提取的 nav.json 文件中定义的item.path检查pathname。在<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>

页面是一个类似存储的对象，它包含当前路径，它将使用新路径自动更新

作为奖励：

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