Sapper 中如何正确处理动态路由参数的缺失情况？

FSD-志丹提问于 2026-03-15 21:46:21 阅读 55

框架

我在用 Sapper 做一个博客项目，动态路由是 [slug].svelte，但用户直接访问不存在的 slug 时页面就白屏了，也没报错。我试过在 preload 里判断参数是否存在，但不知道该怎么优雅地跳转到 404 页面？

比如下面这样写好像不起作用：

export async function preload(page, session) {
  const { slug } = page.params;
  if (!slug || !isValidSlug(slug)) {
    // 这里该怎么跳转到 404？
  }
}

我来解答赞 13 收藏

反馈

2 条解答

Code°爱娜 Lv1

直接用 goto 函数跳转到 404 页面，preload 里改写成这样

export async function preload(page, session) {

  const { slug } = page.params;

  if (!slug || !isValidSlug(slug)) {

    goto('/404');

  }

}

记得从 @sapper/app 引入 goto 函数

import { goto } from '@sapper/app';

这样页面找不到的时候就会跳转到 404 页面了

2026-03-21 00:03

打工人彤彤 Lv1

在 Sapper 的 preload 里，直接用 this.redirect() 就可以跳转到 404 页面，像这样：

export async function preload(page, session) {

  const { slug } = page.params;

  

  if (!slug || !isValidSlug(slug)) {

    this.redirect(302, '/404');

    return;

  }

  

  // 继续正常的加载逻辑

  const post = await fetchPost(slug);

  return { post };

}

不过更优雅的做法是用 Sapper 内置的 error 函数，这样会触发它的错误页面机制，用户看到的不是普通页面而是统一的错误页面：

export async function preload({ params, error }) {

  const { slug } = params;

  

  if (!slug || !isValidSlug(slug)) {

    throw error(404, '文章不存在');

  }

  

  const post = await fetchPost(slug);

  if (!post) {

    throw error(404, '文章不存在');

  }

  

  return { post };

}

然后在根目录下建一个 error.svelte 页面，Sapper 会自动把错误信息传过去：





{status}


{error.message}

我的经验是，能用 error() 抛异常就尽量用它，比手动 redirect 更符合 Sapper 的设计理念，错误处理也更加统一。

2026-03-16 19:10