SvelteKit中进行编程式导航时如何传递参数？

SvelteKit 的 goto 方法没有单独的 params 配置项，你可以根据参数的使用场景选择以下三种实现方式：

1. 动态路由参数（对应 Vue 路由的命名路由 params 场景） #

如果你的目标路由是动态路由，比如路由文件路径为 src/routes/user/[userId]/+page.svelte，直接把参数拼到路径中即可：

import { goto } from '$app/navigation';

const userId = '123';
// 直接跳转至 /user/123
goto(`/user/${userId}`);

目标页面接收参数的方式：

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

<p>当前用户ID：{$page.params.userId}</p>

2. URL 查询参数 #

如果需要传递的参数不需要匹配动态路由规则，要放在 ? 后展示在URL中，推荐用 URLSearchParams 构造参数：

import { goto } from '$app/navigation';

const searchParams = new URLSearchParams({
  userId: '123',
  tab: 'posts',
  source: 'home'
});
// 跳转后路径为 /user?userId=123&tab=posts&source=home
goto(`/user?${searchParams.toString()}`);

目标页面接收参数的方式：

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

<p>用户ID：{$page.url.searchParams.get('userId')}</p>
<p>当前选中Tab：{$page.url.searchParams.get('tab')}</p>

3. 隐藏状态参数（不展示在URL中） #

如果参数不需要暴露在URL里，你可以通过 goto 方法的第二个配置项的 state 字段传递，该参数会存在浏览器的历史记录中，页面刷新后会丢失：

import { goto } from '$app/navigation';

goto('/user', {
  state: {
    userId: '123',
    isAdmin: true,
    fromPage: 'home'
  }
});

目标页面接收参数的方式：

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

<p>是否为管理员：{$page.state?.isAdmin || '否'}</p>
<p>来源页面：{$page.state?.fromPage || '直接访问'}</p>

注意事项 #

• 动态路由参数的命名必须和你路由文件夹/文件的命名完全一致，比如路由是 [userId] 才能通过 $page.params.userId 取值
• state 参数仅在当前会话的历史记录中生效，用户刷新页面、直接访问目标路由或者关闭页面后都会丢失，不适合存放需要持久化的数据
• 如果需要同时传递多种参数，可以组合使用以上方式

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