12

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

就像是：

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

3 回答 3

21

感谢 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)
}
于 2021-06-30T02:19:19.483 回答
12

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

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

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

于 2021-06-30T02:16:55.503 回答
0

它可能不完全是您正在搜索的内容，但我认为值得一提的是可以beforeNavigate利用$app/navigation.

然后，您可以将导航历史记录保存在商店中，以便在您的应用程序中使用它，以管理一些特殊情况。

/routes/__layout.svelte

<script>
$: console.log($previousPage, $nextPage);

import { beforeNavigate } from "$app/navigation";
    beforeNavigate(({ from, to }) => {
    $history = [to.pathname, ...$history];
});
</script>

{#if $history}
  <ul>
    {#each $history as url}
      <li>{url}</li>
    {/each}
  </ul>
{/if history}

旁注：from&to是来自 Web API 的 URL 对象： https ://developer.mozilla.org/en-US/docs/Web/API/URL

/routes/stores.svelte

import { writable } from 'svelte/store';

export const history = writable(['/']);

这是一个基于 SvelteKit Demo 应用程序的演示：

https://stackblitz.com/edit/sveltejs-kit-template-default-wivfds?file=src%2Froutes%2Fstores.js&terminal=dev

于 2022-02-24T14:59:52.517 回答