如何在SvelteKit中导航到动态(slug)路由中的子路由



我有以下路由结构

src/routes/[slug]/results
src/routes/[slug]/about

我不知道如何链接到SvelteKit中的路由。当我通过浏览器导航栏访问它们时,路由本身就可以工作。

我如何在[slug]页面上创建一个简单的链接,它将链接到子路由?

链接到根目录:

<a href="results">results</a>
<a href="/results">results</a>

尝试了下面的操作,但是没有成功。

<a href="/:slug/results">results</a> 
<a href="/[slug]/results">results</a> 

我认为是类似的东西,但是SvelteKit关于路由和高级路由的文档没有提到任何与动态路由中导航相关的内容。

将参数添加到链接:

<script>
import { page } from '$app/stores';
</script>
<a href="/{$page.params.slug}/results">Results</a>

我弄明白了,它有点隐藏在文档中(我是初学者,所以还没有完全了解所有的概念)。

在+ page.js:

/** @type {import('./$types').PageLoad} */
export function load({ params }) {
return {
slug: params.slug
};
}

在+ page.svelte:

<script>
export let data;
</script>
<a href="/{data.slug}/result">results</a>
<a href="/{data.slug}/share">share</a>

最新更新