我正在使用一个包含链接的sidenav的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>

最后，侧边导航被加载到我的**__layout.svelte**中：

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

现在，当我点击一个sidenav链接时，我会被引导到正确的页面，但我的NavLink不是用.active类设计的。但是，如果我检查链接，devtools会显示如下：<a class="link active:true">，而其它链路具有active:false。
所以看起来这个功能是工作的，但是我的活动样式没有被应用（背景颜色）。我错过了什么？
我试着将Active类代码移到SideNav组件而不是NavLink组件，观察到了同样的行为。我无法理解，所以我找到了一个新的方法，工作得很好。
在我的导航链接.svelte中：

<script>
  import {onMount} from "svelte";
  import Icon from '$lib/Icon.svelte';

  let currentPath;
  onMount(() => {
    currentPath = window.location.pathname;
  });
  export let title;
  export let href;
</script>

<a {href} class:active={currentPath == href}>
  <Icon {title} />
</a>

其余的代码是相同的。现在我的链接得到了正确的样式。值得注意的是，它们只是有<a class="active">而不是<a class="active:true">。为什么它不能与其他方法一起工作？