如何在Svelte中实现组件间跳转？列表式导航栏开发遇困求助

核心逻辑是通过状态管理当前激活的组件，点击列表项切换状态后，用svelte:component渲染对应组件。以下是完整实现步骤：

1. 导入组件并定义导航配置 #

在App.svelte中先导入需要跳转的子组件，同时定义导航项的名称与对应组件的映射关系，以及跟踪当前激活组件的状态：

<script>
  // 导入你的子组件
  import Home from './Home.svelte';
  import About from './About.svelte';
  import Contact from './Contact.svelte';

  // 导航项配置：名称 + 对应组件
  const navItems = [
    { name: '首页', component: Home },
    { name: '关于我们', component: About },
    { name: '联系我们', component: Contact }
  ];

  // 初始激活首页组件
  let activeComponent = Home;
</script>

2. 渲染列表式导航栏 #

用{#each}循环渲染导航列表，给每个列表项绑定点击事件切换activeComponent，同时通过class:active标记当前选中项：

<nav>
  <ul>
    {#each navItems as item}
      <li 
        class:active={activeComponent === item.component}
        on:click={() => activeComponent = item.component}
      >
        {item.name}
      </li>
    {/each}
  </ul>
</nav>

添加基础样式区分选中状态：

<style>
  nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
    background-color: #f5f5f5;
    padding: 1rem 2rem;
  }

  li {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s;
  }

  li:hover {
    background-color: #e0e0e0;
  }

  .active {
    background-color: #2d3748;
    color: white;
  }
</style>

3. 用svelte:component渲染当前组件 #

在导航栏下方，通过svelte:component绑定activeComponent，即可自动渲染当前选中的组件：

<main>
  <svelte:component this={activeComponent} />
</main>

额外说明 #

• 如果需要给子组件传递props，直接在svelte:component上添加即可，例如：

  <svelte:component this={activeComponent} pageTitle="当前页面标题" />
  

• 若你需要的是单页应用的路由跳转（URL地址变化），可以使用SvelteKit的路由系统，通过<a href="/about">标签配合页面路由实现，但上述方案更适合无路由的单页组件切换场景。

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