我正在学习如何使用 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 未出现在页面上。
我的开发人员工具也收到一条警告,上面写着:“收到了一个意外的插槽”“默认”