您可以将道具传递给 sveltekit 中的布局吗

Question

我正在使用 SvelteKit 开发一个网站，我希望每个页面都有一个带有导航栏的布局。导航栏有 links，活动 link 是您所在的页面。有没有一种方法可以将每个页面的道具传递给模板，以更改 link 处于活动状态？

谢谢！

Answer 1

我想我知道你在找什么。 SvelteKit 带有默认的 page 商店。 $page.url.pathname 订阅该商店并 returns 当前路径名。您可以通过多种方式应用它。

下面的例子创建了一个组件Navlink.svelte，其中

导入默认的 Svelte 商店 page
创建一个反应式布尔值 active 并在 $page.url.pathname 等于 href 时将其设置为真。 $: 使其具有反应性，这意味着只要 $page.url.pathname 或 href 发生变化，Svelte 就会重新运行代码。
在 a 元素中，我们将 href 作为 prop 传递。每当您使用 Navlink 组件时，您都会像传递常规 a 元素一样传递它 href。这也是我们使用 export let href.
我们还添加class:active。这是有条件地应用 classes 的 Svelte 方法。请注意，这实际上是 class:active={active} 的 shorthand，这意味着我们在变量 active（等号后）为真时应用 class active。当变量和class同名时，我们可以使用class:active。 (docs on this subject)
随心所欲地设置 .active class 的样式。

<script>
  import { page } from "$app/stores"
  export let href
  $: active = $page.url.pathname === href
</script>

<a {href} class:active>
  <slot />
</a>

<style>
  a.active {
    color: red;
  }
</style>

您还可以使用 Tailwind class 结合一些内联逻辑：

<a class:text-primary={$page.url.pathname === '/about'} href="/about">About</a>

或者使用传统的 CSS 结合 ternary operator:

<a href="/about" class="{($page.url.pathname === '/about')? active : inactive}"

您可以将道具传递给 sveltekit 中的布局吗

Can you pass props to a layout in sveltekit

sveltekit