1

我正在学习如何使用 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 模板,并且已将上述代码复制到以下目录中:

pages/_components/Navigation.svelte

然后我尝试将其导入 pages/index.svelte,如下所示:

页面/index.svelte

 <script>

  import Navigation from './_components/Navigation.svelte';

</script>

<div>
  <Navigation/>


</div>

链接显示在页面顶部。当我单击它们时,端点遵循以下模式:

http://localhost:5000/index/home

http://localhost:5000/index/blog

http://localhost:5000/index/about

http://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”?如何摆脱网址中的“索引”一词?


更新

好的,我在所有页面上都列出了导航并且处于半工作状态。

我将导航代码(如下)导入pages/_layout.svelte

代码如下:

页面/_layout.svelte

<script>
    import Navigation from './_components/Navigation.svelte';
</script>

<!--TABS-->

<Navigation/>

pages/_components/Navigation.svelte


<script>
  import {isActive, url} from '@sveltech/routify'

  const links =
  [
    ['./index', 'Home'], //add index if you don't want siblings to be considered children
    ['./form', 'Form']
  ]
</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>

出现导航链接,但现在的问题是所选页面的内容没有出现。

在下图中,正在呈现表单端点。表单组件具有工作 HTML,但 HTML 未出现在页面上。

我的开发人员工具也收到一条警告,上面写着:“收到了一个意外的插槽”“默认”

在此处输入图像描述

4

1 回答 1

1

您不应将 Navigation 组件导入index.svelte文件,而应将其导入_layout.svelte同一目录中的文件。

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

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

更新:

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

<Navigation/>

<main>
  <slot />
</main>
于 2020-08-07T05:23:02.040 回答