如何在 SvelteKit 中以编程方式路由？答案

【问题标题】：How to route programmatically in SvelteKit?如何在 SvelteKit 中以编程方式路由？
【发布时间】：2021-09-12 04:31:26
【问题描述】：

我希望能够管理我的 SvelteKit 应用程序的历史记录，同时确保 SvelteKit 的整个路由系统不会受到任何影响。

类似：

function routeToPage(route: string) {
   router.push(`/${route}`) // equivalent of this function
}

【问题讨论】：

标签： svelte svelte-3 sveltekit

【解决方案1】：

您可以使用goto function 以编程方式导航到 Svelte-Kit 中的路线。最简单的实现是这样的：

<script> 
  import { goto } from '$app/navigation';
  goto("/route")
</script>

但您也可以使用更高级的选项，这将作为目标路由的第二个参数传递。

【讨论】：

Cannot call goto(...) on the server
这不能正常工作。页面刷新出现问题：无法在服务器上调用goto(...)
在服务器上你应该重定向到一个端点
@Theoテオ你是什么意思？你能分享一个例子吗
@seemcat 一个例子对于评论来说太大了，但这里是端点kit.svelte.dev/docs#routing-endpoints的文档

【解决方案2】：

感谢 SvelteKit Discord 的 Theo 回答我自己的问题：

使用https://kit.svelte.dev/docs#modules-$app-navigation。

import { goto } from '$app/navigation';

function routeToPage(route: string, replaceState: boolean) {
   goto(`/${route}`, { replaceState }) 
}

replaceState == true 将替换路由而不是添加到浏览器历史记录中。所以，当你点击返回时，你不会回到你原来的路线。

返回使用History API。

import { goto } from '$app/navigation';

function goBack(defaultRoute = '/home') {
  const ref = document.referrer;
  goto(ref.length > 0 ? ref : defaultRoute)
}

【讨论】：

reflength 变量从何而来？
还有你会在哪里/如何使用goBack()？
reflength 缺少点运算符：ref.length
这行不通，不够解释
这在服务器上不起作用，我需要检查服务器模式并忽略。似乎对 ssr 没有任何作用。