如何使用 Svelte Routify 创建路由链接

Question

我正在学习如何使用 Routify 连接一些路由和链接。我需要帮助。在 Routify 文档中它说：“可以通过多种不同方式处理链接。这可能是最简单的方式”。通过： https ://routify.dev/guide/navigation然后它给出了这个例子：<script>  import {isActive, url} from '@sveltech/routify'  const links =  [    ['./index', 'Home'], //add index if you don't want siblings to be considered children    ['./blog', 'Blog'],    ['./about', 'About'],    ['./contact', 'Contact']  ]</script><style>  .active {font-weight: bold}</style><ul>  {#each links as [path, name]}    <!-- Svelte magic. If isActive is true, the "active" class is applied. -->    <li class:active={$isActive(path)}>      <a href={$url(path)}>        {name}      </a>    </li>  {/each}</ul>不幸的是，它没有给出任何关于如何将其连接到您的应用程序的说明（如果它对我来说太复杂了）。我正在使用 Routify 模板，并将上面的代码复制到以下目录中：页面/_components/Navigation.svelte然后我尝试将它导入到 pages/index.svelte 中：页面/index.svelte <script>  import Navigation from './_components/Navigation.svelte';</script><div>  <Navigation/></div>链接显示在页面顶部。当我单击它们时，端点遵循以下模式：http://localhost:5000/index/homehttp://localhost:5000/index/bloghttp://localhost:5000/index/abouthttp://localhost:5000/index/contact在我的/pages目录中，我有与代码中列出的页面相匹配的页面，例如：/pages/Home.svelte当我单击链接时，我的浏览器停留在同一页面上，并且不嵌入与该链接关联的页面。另外，我的浏览器开发工具说：Uncaught Error: Route could not be found for "/index/home".    at urlToRoute (urlToRoute.js:15)    at updatePage (navigator.js:13)    at pushstate (navigator.js:60)    at History.history.<computed> [as pushState] (navigator.js:51)我需要做什么才能看到相应的页面，为什么它们的中间目录名为“index”？如何去掉 url 中的“索引”一词？

Answer 1

您不应将导航组件导入到index.svelte文件中，而应导入到_layout.svelte同一目录中的文件中。

他们在TV Shows App中显示了设置，尽管它们没有像您尝试的那样显示在 Nav 文件中导入的上述代码，但如果将具有上述代码的组件导入到 _layout 文件中，它将起作用，因为 url 帮助程序解析相对于使用它的页面/布局的路径。

将其导入索引文件会创建相对于索引文件的路径，这就是您在所有路由中看到索引的原因。

更新：

响应需要渲染每个页面的内容。这是使用 _layout 文件中的插槽完成的，在您的示例中它看起来像这样：

<Navigation/>

<main>

  <slot />

</main>