routes - sveltekit 基于哈希的路由

Question

我对 svelte 尤其是 SvelteKit 还很陌生。目前，我正在开展 2 个项目。

第一个是我使用的 SPA svelte-spa-router管理不同的状态并提供前后导航的能力，就像我们在老式网站中所做的那样。这非常有效:)

第二个项目是 SvelteKit 应用程序。我有 3 个用例:

1. 搜索产品
2. 创建产品
3. 显示排名前 10 的产品

首先，我认为如果每个用例需要的话能够预取某种 JSON 数据会很有趣，但另一方面，我不想为每个用例创建一个路由页面子用例，因为我不希望每次用户执行简单操作时都刷新页面。因此，我使用 3 条路线在这 3 个“用例”之间导航:

src/routes/search_product/+page.svelte
src/routes/create_product_page/+page.svelte
src/routes/show_top_10_products/+page.svelte

现在，我遇到了一个问题...创建产品页面需要 3 个步骤。这 3 个步骤由以下 3 个不同的 Svelte 组件表示:

1. EnterProductBasicInfo.svelte
2. UploadPictures.svelte
3. GivePrices.svelte

如果用户正在创建产品页面并处于步骤 2)，则会向他显示 UploadPictures.svelte 组件 .... 但如果他按下后退按钮，他就会看到将退出 create_product_page 路由，而不是返回到步骤 1)，即 EnterProductBasicInfo.svelte 组件。

所以，我想我可以使用我用于 SPA 的 svelte-spa-router，但我在这里询问专家是否有其他内置解决方案SvelteKit 能够管理路线，而无需每次路线更改时刷新整个页面。如果您有一些关于 SPA、SSR、预加载与预取的好链接，我会接受它，因为它对我来说仍然有点模糊。

非常感谢您的帮助。

Answer 1

我认为添加 svelte-spa-router 有点矫枉过正。

在 SvelteKit 中，页面最初在服务器(SSR)上呈现，但一旦加载，页面不会在每次路由更改时刷新。它的行为类似于 SPA，但具有基于自动路由的代码分割、数据加载和内置功能。预取是预加载代码分割的 JavaScript 和数据以进行即时导航的行为。

选项 1
创建一个“src/routes/create_product”文件夹，其中包含 3 个步骤作为子路由“src/routes/create_product/step1/+page.svelte”等，并在 create_product 文件夹内创建一个 +layout.svelte 以共享状态和 UI。

选项 2
但这不适合您的用例，您还可以使用 page store 实现一个简单的基于哈希的部分。 :

<script>
  import { page } from "$app/stores";
</script>

{#if $page.url.hash === "#step2"}
  <a href="#step1">Back to step 1</a>
{:else}
  <a href="#step2">Goto step 2</a>
{/if}