面试题：Svelte组件路由中如何实现页面间传参

Question

在Svelte构建单页面应用的路由系统时，经常需要在不同页面（组件）间传递参数。请描述至少两种在Svelte组件路由中实现页面间传参的方法，并举例说明。

Answer 1

1. 使用 URL 参数

• 方法描述：通过在 URL 中添加参数，组件可以从 URL 解析获取这些参数。在 Svelte 中，可以使用 $page.url.searchParams 来获取 URL 的查询参数。
• 示例：
  • 假设我们有一个链接，跳转到 detail.svelte 页面，并传递一个 id 参数。

  <!-- 在某个组件中 -->
  <a href="/detail?id=123">查看详情</a>
  

  • 在 detail.svelte 组件中获取参数：

  <script>
      import { page } from '$app/stores';
      $: id = $page.url.searchParams.get('id');
  </script>
  
  <h1>详情页，id: {id}</h1>
  

2. 使用 Svelte stores

• 方法描述：创建一个 Svelte store 来存储数据，不同组件都可以订阅和修改这个 store 中的数据，从而实现数据传递。
• 示例：
  • 创建一个 store.js 文件：

  import { writable } from'svelte/store';
  
  export const sharedData = writable(null);
  

  • 在第一个组件中设置数据：

  <script>
      import { sharedData } from './store.js';
      const dataToShare = { message: '这是要传递的数据' };
      sharedData.set(dataToShare);
  </script>
  

  • 在第二个组件中获取数据：

  <script>
      import { sharedData } from './store.js';
      let data;
      $: sharedData.subscribe(value => {
          data = value;
      });
  </script>
  
  <p>{data?.message}</p>