sveltekit 基于哈希的路由

Question

我对 svelte 很陌生，尤其是 SvelteKit。目前，我正在从事 2 个项目。

第一个是 SPA，我在其中使用 svelte-spa-router 来管理不同的状态，并提供像在老式网站中那样来回导航的功能。这非常有效:)

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

搜索产品
创建产品
显示前 10 个产品

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

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

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

EnterProductBasicInfo.svelte
UploadPictures.svelte
GivePrices.svelte

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

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

非常感谢您的帮助。

Answer 1

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

在 SvelteKit 中，页面最初是在服务器 (SSR) 上呈现的，但是一旦加载，每次路由更改时都不会刷新页面。它的行为类似于 SPA，但具有基于自动路由 code-splitting 和数据加载 built-in。预取是为即时导航预加载 code-splitted javascript 和数据的行为。

选项 1
创建一个“src/routes/create_product”文件夹，将 3 个步骤作为子路径。并在 create_product 文件夹中创建一个 __layout.svelte 以共享状态和 UI.

选项 2
但它不适合你 use-case，你也可以使用 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}

（需要@sveltejs/kit 1.0.0-next.277 或更新版本）。

sveltekit 基于哈希的路由

sveltekit Hash-based routing

routes

prefetch

preload

svelte

sveltekit