你可以将 props 传递给 sveltekit 中的布局吗

Question

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

谢谢！

Answer 1

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

以下示例创建一个组件Navlink.svelte，其中

1. 导入默认的 Svelte 商店page
2. 创建一个响应式布尔值，并在equalsactive时将其设置为 true 。这使其成为反应式的，这意味着只要或发生变化，Svelte 就会重新运行代码。$page.url.pathnamehref$:$page.url.pathnamehref
3. 在a元素中，我们href作为 prop 传递。每当您使用 Navlink 组件时，您都href可以像传递常规a元素一样传递它。这也是我们使用export let href.
4. 我们还添加class:active. 这是有条件应用类的 Svelte 方式。请注意，这实际上是 的简写，这意味着我们在变量（等号之后）为 true时class:active={active}应用该类。当变量和类共享相同的名称时，我们可以使用. （有关此主题的文档）activeactiveclass:active
5. 按照您喜欢的方式设计.active班级。

<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 类与一些内联逻辑结合使用：

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

或者将传统 CSS 与三元运算符结合使用：

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