如何使用 Sveltekit SPA 和客户端路由处理浏览器 URL 导航

Question

我们有一个自定义服务器，在单个 URL 端点上为我们的精简应用程序提供服务。这个简洁的应用程序是一个 SPA。我们的应用程序有几个您可以访问的页面，利用客户端路由来导航页面，这样当导航到不同的页面时，URL 也会发生变化。

我似乎找不到有关如何处理浏览器中 URL 更改（例如刷新或导航到另一个页面）的任何信息。当然，更改 url 会将其直接发送到我们没有运行服务的服务器，我们只有一个托管 SPA svelte 应用程序的端点。

我认为 svelte 有某种机制来捕获 URL 更改并在其自己的内部路由机制中处理请求，但找不到任何相关内容。我的建议是否可能，或者我错过了什么？

我能找到的最接近的是这个导航订阅，它在浏览器网址被触发时触发，但这就是它应该被检测到的方式吗？否则我只能想到使用这个 hook 来让它调用应用程序服务端点而不是调用任何东西，但是有没有办法简单地加载某个页面而不是发送 url 请求？我想这可能适用于当您的路线有服务器端点并且不适用于 SPA 时。

任何帮助或澄清，我们将不胜感激。

Answer 1

我似乎找不到有关如何处理浏览器中 URL 更改（例如刷新或导航到另一个页面）的任何信息。

在这些情况下，服务器需要发回

app.html

（或

index.html

文件，或构建后调用的任何文件）。当 Web 浏览器收到此文件时，它将启动 SPA，然后客户端路由将根据当前 URL 显示正确的页面。

如何配置服务器发回该文件取决于您使用的服务器。例如，如果你使用 nginx，我找到了一个简单的例子：

https://github.com/johnknapp/svelte-rollup-routify-smui-spa/blob/master/nginx-spa.conf

  server_tokens off; # suppress nginx version info

  listen   8080;
  listen   [::]:8080 default ipv6only=on;

  root /usr/share/nginx/html;

  server_name _; # all hostnames

  location / {
      try_files $uri $uri/ /index.html; # for SPA
  }
}

这里与 SPA 相关的主要内容是

try_files

线。在那里，如果找到匹配的文件，他们会发回与 URL 匹配的文件（用于 CSS 文件、JS 文件和静态文件（例如图像）），如果没有匹配到，他们将发回

index.html

文件。