亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 Svelte Routify 創建路由鏈接

如何使用 Svelte Routify 創建路由鏈接

白衣染霜花 2022-12-22 13:43:59
我正在學習如何使用 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 中的“索引”一詞?
查看完整描述

1 回答

?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

您不應將導航組件導入到index.svelte文件中,而應導入到_layout.svelte同一目錄中的文件中。


他們在TV Shows App中顯示了設置,盡管它們沒有像您嘗試的那樣顯示在 Nav 文件中導入的上述代碼,但如果將具有上述代碼的組件導入到 _layout 文件中,它將起作用,因為 url 幫助程序解析相對于使用它的頁面/布局的路徑。


將其導入索引文件會創建相對于索引文件的路徑,這就是您在所有路由中看到索引的原因。


更新:


響應需要渲染每個頁面的內容。這是使用 _layout 文件中的插槽完成的,在您的示例中它看起來像這樣:


<Navigation/>


<main>

  <slot />

</main>


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 256 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號