svelte - page.params 在 SvelteKit 中未定义

Question

我是 SvelteKit 的新手。我阅读了文档(我正在尽力遵循并遵循使我的网站正常运行的内容)。

在我的src>routes>posts>[postId].svelte中:

<script>
    // http://localhost:3000/posts/[postId]

    import PostDetails from '../../components/pages/PostDetails.svelte';
</script>

<PostDetails />

在我的src>组件>页面>PostDetail.svelte中:

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

   console.log({ page });
   console.log('page.params', page.params);
</script>

<h1>Post Title</h1>

我想获取page.params.postId，但它不起作用。因此，我决定在控制台上记录 page 和 page.params 的值:

如上所述in the docs ，我期望从这个 page 对象中获取 { host, path, params, query } 。但我除了一个 subscribe 函数之外什么也没有。我究竟做错了什么？请帮忙。

Answer 1

$app/stores 中的

page 是一个商店，这意味着您需要订阅才能获取当前值。这是因为该值不是固定的，而是在每次页面更新时更新。要轻松订阅商店，请在其前面添加 $ 符号:

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

   // manually (don't forget to unsubscribe in onDestroy to avoid memory leaks)
   page.subscribe(currentPage => console.log(currentPage));

   // easier
   console.log({ page: $page });
   console.log('page.params', $page.params);
</script>

<h1>Post Title</h1>

$app/stores 上的文档:https://kit.svelte.dev/docs#modules-$app-stores
关于使用 $ 自动订阅的文档:https://svelte.dev/docs#4_Prefix_stores_with_$_to_access_their_values