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

Posted 2023-02-19

【中文标题】如何在 SvelteKit 中以编程方式路由？

【英文标题】：How to route programmatically in SvelteKit?

【发布时间】：2021-09-12 04:31:26

【问题描述】：

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

类似：

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

【参考方案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

这行不通，不够解释

这在服务器上不起作用，我需要检查服务器模式并忽略。似乎对 s-s-r 没有任何作用。