Sveltekit：使用 $page.path 設置活動鏈接的樣式

Question

我正在開發一個帶有包含鏈接的 sidenav 的 sveltekit 應用程序。 我無法使鏈接上的活動 class 樣式正常工作。

鏈接是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 />

現在，當我單擊其中一個 sidenav 鏈接時，我被路由到正確的頁面，但我的 NavLink 沒有使用.active class 設置樣式。但是，如果我檢查該鏈接，devtools 會向我顯示： <a class="link active:true">和其他鏈接有active:false 。

所以看起來 function 正在工作，但我的活動樣式沒有應用（背景顏色）。 我錯過了什么？

我嘗試將 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>

和密碼的rest是一樣的。 現在我的鏈接獲得了正確的樣式。 值得注意的是，它們只有<a class="active">而不是<a class="active:true"> 。 為什么它不能與其他方法一起使用？

Answer 1

要在最新版本的 SvelteKit 中實現這一點，在引入一些重大更改后，您可以執行以下操作：

<a {href} class:active={$page.url.pathname === href}>

$page.url返回如下內容：

URL { 
    href: "http://localhost:5173/accounts/login", 
    origin: "http://localhost:5173", 
    protocol: "HTTP:", 
    username: "", 
    password: "", 
    host: "localhost:5173", 
    hostname: "localhost", 
    port: "5173", 
    pathname: "/accounts/login", 
    search: "" 
}

然后，您可以將$page.url.pathname與錨標記的href進行比較。

Answer 2

我想通了....我想我只是忘了加上引號。 哦。 NavLink 的工作代碼（也包含子頁面）是：

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

Answer 3

這是我的解決方案，只匹配當前 URL 的第一段：

<a
  class:active={$page.url.pathname.split("/")[1] ===item.href.split("/")[1]}
  href={item.href}>
  {item.label}
</a>

  a.active {
   background-color:red;
  }

Answer 4

您可能想使用僅包含路由 ID 的$page.route.id ，即使路徑中有參數也是如此。

例如，路徑/catalogue/123將給出：

• $page.url.pathname === /catalogue/123 （每個項目不同，不是到處都有效）
• $page.route.id === /catalogue/[id] （所有項目都相同）

然后你可以在你的鏈接中使用：

<a href="/catalogue/123" class:active={$page.route.id === '/catalogue/[id]'}>catalogue</a>

最后，這將適用於 static 鏈接 (/catalogue) 和動態鏈接 (/catalogue/456)。