SvelteKit $navigating store对锚点链接无响应的解决咨询

数据老陈

2026-8-20

解决SvelteKit中锚点变化时折叠导航栏的问题

你的问题核心是$navigating store仅在路由路径（非锚点部分）变化时更新，同一页面内的锚点跳转不会触发它。要覆盖锚点变化的场景，有两种可靠的实现方式：

方法一：监听`hashchange`事件

直接监听浏览器的hashchange事件，锚点变化时会触发该事件，以此调用折叠函数。同时保留原有的$navigating逻辑处理路径跳转：

<script>
  import { navigating } from '$app/stores';
  import { onMount, onDestroy } from 'svelte';

  // 你的导航栏折叠逻辑
  function collapseNavbar() {
    // 示例：设置导航栏状态为折叠
    // navbarExpanded = false;
    console.log('导航栏已折叠');
  }

  // 处理路径跳转的情况
  $: if ($navigating) collapseNavbar();

  // 处理锚点变化的情况
  function handleHashChange() {
    collapseNavbar();
  }

  onMount(() => {
    window.addEventListener('hashchange', handleHashChange);
    // 组件销毁时移除监听，避免内存泄漏
    return () => window.removeEventListener('hashchange', handleHashChange);
  });
</script>

方法二：监听`$page` store的hash变化

利用SvelteKit的$page store，它会在页面URL的任何部分（包括锚点）变化时更新。通过跟踪hash值的变化来触发折叠：

<script>
  import { navigating, page } from '$app/stores';

  let previousHash = '';

  function collapseNavbar() {
    // 你的折叠逻辑
  }

  // 路径跳转时触发
  $: if ($navigating) collapseNavbar();

  // 锚点变化时触发（排除初始加载的重复触发）
  $: {
    const currentHash = $page.url.hash;
    if (currentHash !== previousHash) {
      collapseNavbar();
      previousHash = currentHash;
    }
  }
</script>