Sveltekit：使用 $page.path 设置活动链接的样式

Question

我正在开发一个 sveltekit 应用程序，其 sidenav 包含 links。我无法让 link 上的活动 class 样式正常工作。

link是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>

这些link用于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 />

现在，当我单击其中一个 sidenav link 时，我被路由到正确的页面，但我的 NavLink 没有使用 .active class 样式。但是，如果我检查 link，devtools 会向我显示：<a class="link active:true"> 和其他 link 有 active:false.

所以看起来功能正常，但我的活动样式没有应用（背景颜色）。我错过了什么？

我尝试将 Active class 代码移动到 SideNav 组件而不是 NavLink 组件并观察到相同的行为。我想不通，所以我找到了一个很好用的新方法。

在我的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>

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

Answer 1

我想通了....我想我只是忘了包括引号。哦。 NavLink 的工作代码（也包括子页面）是：

<a {href} class:active="{$page.path.includes(href)}">

Sveltekit：使用 $page.path 设置活动链接的样式

Sveltekit: Styling active links with $page.path

css

routes

svelte

sveltekit