SvelteKit 2获取上一个访问路由的实现方案咨询

步骤1：创建路由历史Store #

在src/lib/stores/history.js中定义可写Store，用于存储上一个路由：

import { writable } from 'svelte/store';

export const previousRoute = writable(null);

步骤2：在根布局中监听导航事件 #

在src/routes/+layout.svelte里，通过afterNavigate钩子记录用户的导航历史：

<script>
  import { afterNavigate } from '$app/navigation';
  import { previousRoute } from '$lib/stores/history';

  afterNavigate(({ from }) => {
    // 仅当存在来源路由时更新Store
    if (from) $previousRoute = from.url.pathname;
  });
</script>

<slot />

步骤3：在错误页中使用历史路由 #

在错误页（src/routes/+error.svelte）中，调用Store中的历史路由实现返回按钮和预加载逻辑：

<script>
  import { goto, preloadData } from '$app/navigation';
  import { previousRoute } from '$lib/stores/history';

  const handleGoBack = async () => {
    if ($previousRoute) {
      await goto($previousRoute);
    } else {
      // 无历史路由时跳转到默认页面（如首页）
      await goto('/');
    }
  };

  const handlePreload = async () => {
    if ($previousRoute) {
      await preloadData($previousRoute);
    }
  };
</script>

<button
  on:click={handleGoBack}
  on:mouseenter={handlePreload}
  disabled={!$previousRoute}
>
 返回上一页
</button>

注意事项 #

• 若用户直接访问错误页（如输入无效URL），previousRoute会是null，此时按钮可禁用或设置默认跳转目标。
• SSR环境下无法获取客户端导航历史，因此previousRoute仅在客户端渲染后才有有效值，无需额外处理SSR场景。

内容的提问来源于stack exchange，提问作者Diego Ulloa