我一直在开发 sveltekit 应用程序,最近我的主导航菜单遇到了问题。当加载或刷新应用程序时,与当前 URL 对应的当前菜单项不会设置为活动状态。 (即菜单项“Home”的 URL 为“/”)我很难在网上找到任何有用的东西来演示如何设置它,但我有一个可行的解决方案,并认为我会为其他人记录它。目前很简单。
我有一个 nav.json 文件,我在其中定义应用程序中的任何菜单,从而可以轻松组织菜单。我将其导入到文件顶部并将其存储在数组中以供以后使用。
import menuObj from '../nav/nav.json';
let sidebar = menuObj.menus[0].items;
onMount()
只是在加载导航组件时获取当前路径,并且只为我运行一次。
然后 - 使用<svelte:window on:click={handlePageClick}/>
我们可以监听页面上的任何点击。
In the handlePageClick(e)
方法我们传递 on:click 事件。使用该事件我们可以捕获当前pathname
的网址。这使我们能够检查pathname
反对我们的item.path
这是在我使用导入和提取的 nav.json 文件中定义的#each
我们的 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>
我还没有发现这有什么缺点。如果我发现任何东西,我会更新这个问题。