SvelteKit中如何在动态(slug)路由内跳转至子路由

你的路由结构src/routes/[slug]/results和src/routes/[slug]/about是有效的动态子路由，要在[slug]页面中创建正确的跳转链接，可以用以下两种方法：

方法一：使用相对路径 #

在src/routes/[slug]/+page.svelte（即[slug]对应的页面组件）中，直接使用不带开头斜杠的相对路径：

<a href="results">查看结果</a>
<a href="about">关于</a>

这种写法会基于当前页面的URL（比如/my-post）自动拼接成/my-post/results和/my-post/about，完全符合你的需求。

方法二：利用page store构建绝对路径 #

如果你的链接位于嵌套组件中，相对路径可能出现偏差，可以通过SvelteKit提供的page store获取当前路由的slug参数，拼接成绝对路径：

<script>
  import { page } from '$app/stores';
</script>

<a href="/{$page.params.slug}/results">查看结果</a>
<a href="/{$page.params.slug}/about">关于</a>

这种写法更明确，不受组件层级影响，能确保路径始终指向当前slug下的子路由。

你之前写法无效的原因： #

• <a href="/results">：开头的斜杠会让路径指向根目录下的/results，而非当前slug的子路由。
• <a href="/:slug/results">或<a href="/[slug]/results">：:[slug]和[slug]是SvelteKit的路由定义语法，不是实际的URL路径，浏览器会将其当作字面量解析，导致路径错误。

内容的提问来源于stack exchange，提问作者Kasper Kamperman