如何在SvelteKit中进行页面重定向？

Question

我有一个页面，其内容从SvelteKit存储中呈现。如果存储无效，则需要将用户重定向到主页。不幸的是，即使不检查任何条件，我也找不到重定向用户的方法，因此让我们专注于一个更简单的问题： 如何始终从某个页面重定向到主页？

我尝试了以下方法，但都没有成功：

• 在页面上的脚本标签之前使用<script context="module">，如下所示：

<script context="module">
    export async function load() {
        return {
            status: 302,
            redirect: "/"
        };
    }
</script>

• 在 +page.js 文件中使用 PageLoad：

/** @type {import('./$types').PageLoad} */
export function load() {
    return {
        status: 302,
        redirect: '/'
    };
}

当我使用上述代码时，网站似乎没有任何更改，没有出现错误，但重定向未发生。如果我意外地到达页面（在搜索栏中输入其地址，商店还没有准备好），我会被重定向到错误页面，因为发生了错误（我想通过主页重定向来防止这种情况）。如果我按预期到达页面（商店正常运营），页面会正常呈现，不会发生重定向。

- Theo

Answer 1

看 SvelteKit 重定向文档。

你必须抛出一个redirect：

import { redirect } from '@sveltejs/kit';
 
export function load() {
  // ...
  throw redirect(302, '/');
}

在页面上，你可以使用goto。

- H.B.

---

是的，但如果我想在加载函数之外执行该操作怎么办？例如，在 +page.svelte 文件中。 - HomeIsWhereThePcIs

Answer 2

根据文档页面，您可以使用goto(theurl)。示例：

import { goto } from '$app/navigation';
// ...Your other imports

goto('/redirectpage');

如果您喜欢使用本地方法，则在文件.svelte中可以这样做：

如果您不使用SSR，则可以这样做：

window.location.href = '/redirectpage';

或者如果您正在使用 SSR，则是这样的：

import { browser } from '$app/environment';
// ...Your other imports

if (browser) { // to prevent error window is not defined, because it's SSR
    window.location.href = '/redirectpage';
}

- Kevin Niam

Answer 3

要在服务器上执行此操作，您需要将其放在+page.server.ts中。

// src/routes/page-to-redirect/+page.server.ts

import { redirect } from '@sveltejs/kit';

export function load() {
    throw redirect(302, '/redirect-to-this-url');
}

- sirbots