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组件。

所以，我想我可以使用我svelte-spa-router在 SPA 中使用过的，但我在这里询问专家 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
但这不适合您的用例，您还可以使用页面存储实现一个简单的基于哈希的部分：

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