[英]How to route programmatically in SvelteKit?
我希望能够管理我的 SvelteKit 应用程序的历史记录,同时确保 SvelteKit 的整个路由系统不会受到任何影响。
就像是:
function routeToPage(route: string) {
router.push(`/${route}`) // equivalent of this function
}
感谢 SvelteKit Discord 的 Theo 回答我自己的问题:
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)
}
您可以使用goto 函数以编程方式导航到 Svelte-Kit 中的路线。 最简单的实现是这样的:
<script>
import { goto } from '$app/navigation';
goto("/route")
</script>
但是您也可以使用更高级的选项,这将作为目标路由的第二个参数传递。
它可能不完全是您正在搜索的内容,但我认为值得一提的是可以利用$app/navigation
提供的beforeNavigate
回调。
然后,您可以将导航历史记录保存在商店中,以便在您的应用程序中使用它,以管理一些特殊情况。
/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 应用程序的演示:
import { goto } from '$app/navigation';
function routeToPage(route: string) {
goto(route)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.