SvelteKit

路由與導向

本頁說明 Intor 在 SvelteKit 專案中的路由整合方式。

本節延續 SvelteKit 快速開始，進一步加入 Routing 設定。

專案結構

+page.svelte
U
intor-config.ts
M

整合步驟

♯1 建立動態路由

在 routes/ 中新增動態路由資料夾 [locale]，並在底下新增 +page.svelte。

該 +page.svelte 內容可直接沿用前一章的 使用範例 ，此處不再重複說明。

+page.svelte
U

♯2 啟用 Routing 設定

在設定檔中啟用 Routing 行為。

詳見：設定檔/Routing 

intor-config.ts
M
import { defineIntorConfig } from "intor/config";

export const intorConfig = defineIntorConfig({
  // ...
  routing: { localePrefix: "all" },
});

設定完成後，請求將依據 Routing 規則自動導向至對應的語系路徑。

♯3 使用導航工具

以下工具用於描述與執行具備語系意識的導覽行為。
其組合規則請參考：導航意圖

useNavigation

封裝 SvelteKit 的導航能力，並加入語系導向邏輯。

提供兩個輔助方法：

  • goto：執行導覽，並可選擇切換語系。
  • href：解析對應語系的目的地路徑，不產生任何副作用。
const { goto, href } = useNavigation();

goto("/", { locale: "en" })

<a href={href("/about")}>About</a>

On this page