SvelteKit 2中如何检测URL参数变化？

核心思路 #

利用$page响应式Store结合afterNavigate生命周期函数，覆盖goto跳转、浏览器前进/后退、手动修改URL等所有参数变化场景，同时配合客户端缓存提升性能。

具体实现 #

1. 响应式监听URL参数变化 #

$page是SvelteKit提供的可读Store，当URL发生变化时，$page.url会自动更新，通过响应式语句可以实时捕获参数变化：

<script>
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';

  let currentMenu;
  let currentCat;
  // 客户端缓存，避免重复请求数据
  const menuDataCache = new Map();

  // 响应式块：URL参数变化时自动执行
  $: {
    const searchParams = $page.url.searchParams;
    const newMenu = searchParams.get('menu');
    const newCat = searchParams.get('cat');

    // 仅当参数实际变化时加载数据
    if (newMenu !== currentMenu || newCat !== currentCat) {
      currentMenu = newMenu;
      currentCat = newCat;
      loadTargetMenuData(currentMenu, currentCat);
    }
  }

  // 更新URL参数的方法（侧边栏点击时调用）
  function updateUrlParams(menu, cat) {
    const searchParams = new URLSearchParams($page.url.searchParams);
    if (menu) searchParams.set('menu', menu);
    if (cat) searchParams.set('cat', cat);
    
    // 跳转时保留历史记录，支持前进后退
    goto(`?${searchParams.toString()}`, { noScroll: true });
  }

  // 加载数据（含缓存逻辑）
  async function loadTargetMenuData(menu, cat) {
    if (!menu || !cat) return;
    
    const cacheKey = `${menu}-${cat}`;
    if (menuDataCache.has(cacheKey)) {
      // 直接使用缓存数据更新页面
      const cachedData = menuDataCache.get(cacheKey);
      updatePageContent(cachedData);
      return;
    }

    // 无缓存时请求API
    const response = await fetch(`/api/menu-items?menu=${menu}&cat=${cat}`);
    const data = await response.json();
    
    menuDataCache.set(cacheKey, data);
    updatePageContent(data);
  }

  // 更新页面内容的方法
  function updatePageContent(data) {
    // 渲染菜品列表等逻辑
    console.log('更新页面内容:', data);
  }
</script>

2. 结合afterNavigate处理浏览器导航 #

afterNavigate会在每次导航完成后触发，包括浏览器前进/后退操作，作为响应式监听的补充，确保所有场景下参数变化都能被捕获：

<script>
  import { page } from '$app/stores';
  import { afterNavigate, goto } from '$app/navigation';

  let currentMenu;
  let currentCat;
  const menuDataCache = new Map();

  // 导航完成后更新参数与数据
  afterNavigate(({ url }) => {
    const menu = url.searchParams.get('menu');
    const cat = url.searchParams.get('cat');
    
    if (menu !== currentMenu || cat !== currentCat) {
      currentMenu = menu;
      currentCat = cat;
      loadTargetMenuData(menu, cat);
    }
  });

  // 保留响应式监听处理goto跳转场景
  $: {
    const searchParams = $page.url.searchParams;
    const newMenu = searchParams.get('menu');
    const newCat = searchParams.get('cat');
    
    if (newMenu !== currentMenu || newCat !== currentCat) {
      currentMenu = newMenu;
      currentCat = newCat;
      loadTargetMenuData(newMenu, newCat);
    }
  }

  // 其余方法同上方示例
  // updateUrlParams、loadTargetMenuData、updatePageContent...
</script>

关键注意事项 #

• 使用goto更新URL时，通过URLSearchParams保留现有参数，避免丢失其他查询字段；
• 客户端缓存使用Map存储，以menu-cat为键值，减少重复API请求；
• 响应式块中添加参数判断，避免无意义的重复执行数据加载逻辑。

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