Svelte中通过on:click跳转传递参数合并仅样式脚本有差异的重复页面

核心思路是抽离两个子页面的公共结构为单一组，通过主页面传入的场景标识动态匹配对应的样式、运算逻辑，完全消除重复代码。

1. 主页面传递场景标识 #

根据你的跳转方式二选一实现即可：

场景A：路由跳转（如SvelteKit项目） #

跳转时把标识放入路由查询参数：

<script>
  import { goto } from '$app/navigation';
</script>

<button on:click={() => goto('/common-subpage?scene=type1')}>进入场景1</button>
<button on:click={() => goto('/common-subpage?scene=type2')}>进入场景2</button>

场景B：单页内组件切换（无路由变化） #

直接把标识作为props传给公共子组件：

<script>
  import CommonSubpage from './CommonSubpage.svelte';
  let activeScene = null;
</script>

<button on:click={() => activeScene = 'type1'}>打开场景1</button>
<button on:click={() => activeScene = 'type2'}>打开场景2</button>

{#if activeScene}
  <CommonSubpage scene={activeScene} on:close={() => activeScene = null} />
{/if}

2. 公共子页面实现 #

第一步：接收标识并匹配差异配置 #

<script>
  // 路由场景取参数：
  import { page } from '$app/stores';
  const scene = $page.url.searchParams.get('scene') || 'type1';

  // 组件props场景直接声明即可：
  // export let scene = 'type1';

  // 统一配置两个场景的差异项
  const configMap = {
    type1: {
      primaryColor: '#165DFF',
      compute: (val) => val * 2,
      tipText: '场景1专属提示'
    },
    type2: {
      primaryColor: '#FF4D4F',
      compute: (val) => val * 5,
      tipText: '场景2专属提示'
    }
  };

  const currentConfig = configMap[scene];
  let inputVal = 0;
  // 动态绑定运算逻辑
  $: computeResult = currentConfig.compute(inputVal);
</script>

第二步：复用公共结构，动态绑定样式 #

<!-- 结构完全复用，仅通过配置动态替换差异内容 -->
<div style:--theme-color={currentConfig.primaryColor} class="common-wrap">
  <h3>{currentConfig.tipText}</h3>
  <input type="number" bind:value={inputVal} />
  <p>运算结果：{computeResult}</p>
</div>

<style>
  .common-wrap {
    /* 公共样式统一写，差异用CSS变量控制 */
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    padding: 16px;
    border-radius: 8px;
  }
</style>

可选优化 #

• 如果差异逻辑复杂度很高，可以把两个场景的运算逻辑抽为单独的type1.js/type2.js文件，子页面根据标识动态导入
• 样式差异量大的话可以单独抽为主题CSS文件，或者用CSS类切换控制
• 增加非法标识的兜底逻辑，传入未定义的场景时默认回退到其中一个合法场景，避免页面报错

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