如何在SvelteKit中获取上一页的子URL（如'/page'）？

先修正你现有代码的问题 #

你当前的代码存在变量未定义就使用的错误，previousUrl在substr调用时还未赋值，导致无法运行。修正后的客户端代码可以这样写：

import { browser } from '$app/environment';

if (browser) {
  const referrerUrl = new URL(document.referrer);
  // 获取完整路径，比如 '/page'
  const pathname = referrerUrl.pathname;
  // 如果只需要路径最后一段（比如 'page'），可以用：
  // const lastSegment = pathname.split('/').pop() || '';
}

利用SvelteKit内置能力追踪上一页 #

$page本身不直接存储上一页信息，但可以通过SvelteKit的导航API实现追踪：

方法1：用beforeNavigate记录页面导航 #

在根布局或组件中，通过导航钩子记录上一页路径，适合追踪客户端内的跳转：

<script>
  import { beforeNavigate, page } from '$app/stores';
  import { browser } from '$app/environment';

  let previousPath = '';

  if (browser) {
    beforeNavigate(({ from }) => {
      if (from) {
        previousPath = from.url.pathname;
      }
    });
  }
</script>

{#if previousPath}
  <p>上一页路径：{previousPath}</p>
{/if}

方法2：服务端通过请求头获取（仅初始请求） #

如果是服务端渲染场景，可在load函数中获取外部来源的Referer头：

export async function load({ request }) {
  const referer = request.headers.get('referer');
  let previousPath = '';
  if (referer) {
    const url = new URL(referer);
    previousPath = url.pathname;
  }
  return { previousPath };
}

注意：此方法仅能获取进入当前页面的外部来源，无法追踪客户端内的跳转。

内容的提问来源于stack exchange，提问作者Natumanya Guy