Javascript 如何使用苗条Routify创建路线链接

我正在学习如何使用Routify连接一些路由和链接。我需要帮助

在RoutifDocs上，它说：

“链接可以用一系列不同的方法处理。这可能是最简单的方法。”

通过：

然后给出了这个例子：

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

在我的/pages目录中，我有与代码中列出的页面匹配的页面，例如：

/pages/Home.svelte

 <script>

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

</script>

<div>
  <Navigation/>


</div>

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

<!--TABS-->

<Navigation/>

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

当我单击链接时，我的浏览器将停留在同一页面上，并且不会嵌入与链接关联的页面。此外，我的浏览器开发工具还说：

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/home”的路由。
在urlToRoute（urlToRoute.js:15）
在updatePage（navigator.js:13）
在pushstate（navigator.js:60）
历史，历史。[作为pushState]（navigator.js:51）

我需要做什么才能看到相应的页面？为什么它们是名为“index”的中间目录？如何去掉url中的“索引”一词

---

更新

好的，我在所有页面上都列出了导航，并且正在运行

我将我的导航代码（如下）导入到页面/\u layout.svelte

代码如下：

页面布局。苗条

 <script>

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

</script>

<div>
  <Navigation/>


</div>

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

<!--TABS-->

<Navigation/>

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

从“/_components/Navigation.svelte”导入导航；

页面/\u组件/导航。苗条

 <script>

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

</script>

<div>
  <Navigation/>


</div>

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

<!--TABS-->

<Navigation/>

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

从'@sveltech/routify'导入{isActive，url}
常量链接=
[
['./index'，Home']，//如果不希望兄弟姐妹被视为孩子，请添加索引
['./表格'，'表格']
]
.active{font-weight:bold}

{#每个链接都作为[path，name]}


{/每个}

导航链接会出现，但现在的问题是所选页面的内容不会出现

在下图中，正在渲染表单端点。表单组件具有可工作的HTML，但HTML不会显示在页面上

我的开发者工具也收到了一条警告：“收到了一个意外的插槽”默认值

---

您不应该将导航组件导入到

index.svelte

文件中，而是导入到同一目录下的

\u layout.svelte

文件中

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

将其导入索引文件会创建相对于索引文件的路径，这就是为什么在所有路由中都会看到索引

更新：

作为对需要呈现每个页面内容的响应。这是使用_布局文件中的插槽完成的，在您的示例中，它将如下所示：

<Navigation/>

<main>
  <slot />
</main>

谢谢，你帮了我一部分！在完成你的建议后，我遇到了另一个问题。上面我创建了一个“更新”。再次感谢！更新了答案，希望这有帮助。