SvelteKit中如何内联组合变量并设置路由激活类？

方法一：通过路由ID匹配（最简洁可靠） #

如果你的路由对应文件是src/routes/[id]/share/+page.svelte，直接用$page.route.id判断即可，不需要拼接任何路径参数：

<li class:is-active={$page.route.id === '/[id]/share'}>
  分享页面
</li>

这种方式完全不受base路径、参数格式的影响，只要当前路由是目标动态路由，就会匹配成功。

方法二：正确生成预期路径对比 #

如果一定要基于$page.url.pathname做判断，要避免手动拼接的坑，推荐用SvelteKit提供的工具或规范的字符串拼接：

方式A：用$app/paths的base拼接

确保从$app/paths导入官方的base变量（它会自动读取你配置的base路径，且不带末尾斜杠）：

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

<li class:is-active={$page.url.pathname === `${base}/${$page.params.id}/share`}>
  分享页面
</li>

方式B：用resolveRoute自动生成路径

从$app/navigation导入resolveRoute函数，它会自动处理base路径和参数，生成标准的路径字符串：

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

<li class:is-active={$page.url.pathname === resolveRoute('/[id]/share', { id: $page.params.id })}>
  分享页面
</li>

为什么之前的方法无效？ #

大概率是这两个原因：

• 没有正确导入$app/paths里的base，而是用了自定义的错误值（比如手动加了末尾斜杠），导致拼接出的路径和实际URL不匹配；
• 当组件不在目标路由下时，$page.params.id可能未定义，拼接出无效路径（比如/undefined/share），导致对比失败。

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