svelte - 如何从 Svelte 中的端点为组件创建动态页面？

Question

例如，我有一个组件blog-post.svelte。该组件包含我的博客文章的基本布局。然后根据获取端点的数据，我想从组件blog-post.svelte创建不同的页面。

• example.com/how-to-start-website
• example.com/how-to-eat-apple
• example.com/how-to-eat-cake

标签： svelte

Answer 1

您可以使用 动态实例化组件<svelte:component>，因此您可以根据当前端点选择不同的组件：

<script>
  // Import all your components here

  let myComponent = false;
  let endpoint = ; // add your code to determine your endpoint here

  switch (endpoint) {
    case 'endpoint 1':
      myComponent = EndpointComponent1;
      break;
    case 'endpoint 2':
      myComponent = EndpointComponent2;
      break;
    case 'endpoint 3':
      myComponent = EndpointComponent3;
      break;
    default:
      myComponent = DefaultEndpointComponent;
      break;
  }
</script>

<svelte:component this={myComponent} />