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

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} />

Answer 2

如果您不打算深入研究Sapper和SSR，那么在客户端使用<svelte:component>特殊元素来实现自己的简单哈希路由就不会太困难了。回来了。

这里是一个小项目，我把它放在一起展示了如何进行：https://github.com/joshmanderson/svelte-blog-hash-router-example

这是一个演示：https://svelte-blog-hash-router-example-437uuzkc5.now.sh

该解决方案的一个警告是，所有博客帖子的散列都采用post-{id}的形式，以便能够轻松匹配博客帖子的路线。当然，有多种方法可以解决此问题，例如：如果当前哈希值与任何预定义的路线都不匹配，则可以假定为博客文章，然后，如果找不到匹配的博客文章，则可以可以退回到您未找到或索引的路线。但是，您可能想要实现完全由您决定的事情。

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

2 个答案: