相关疑难解决方法(0)

我正在开发一个 sveltekit 应用程序，其侧导航包含链接。我无法使链接上的活动类样式正常工作。

这些链接是NavLink.svelte中的组件：

<script>
  import { page } from '$app/stores';
  import Icon from '$lib/Icon.svelte';
  export let title;
  export let href;
</script>

<a {href} class="link" class:active={$page.path == href}>
  <Icon {title} />
</a>

<style>
a.active {
  background-color: rgba(0,0,0,0.24);
</style>

这些链接在SideNav.svelte中使用：

<script>
  import NavLink from '$lib/NavLink.svelte';
</script>

<nav class="container">
  <div id="links">
    <NavLink href="/link1" title="icon1" />
    <NavLink href="/link2" title="icon2" />
    <NavLink href="/link3" title="icon3" />
  </div>
</nav>

最后，sidenav 加载到我的__layout.svelte中：

<SideNav />
<slot />
<Footer />

现在，当我单击其中一个侧导航链接时，我将被路由到正确的页面，但我的导航链接未采用该类的样式.active。但是，如果我检查该链接，devtools 会向我显示： …