SvelteKit中Swiper哈希导航异常：直接访问哈希始终显示首屏

核心问题定位 #

你当前的问题大概率是未导入并注册Swiper的HashNavigation模块——虽然你开启了hashNavigation配置，但Swiper的哈希导航功能是独立模块，仅导入Navigation模块不足以触发原生的哈希监听逻辑，导致直接访问带哈希的URL时，Swiper不会自动定位到对应幻灯片。

可行解决方案 #

方案1：补全Swiper模块导入与注册

这是最根本的修复步骤，让Swiper原生的哈希导航功能生效：

1. 导入HashNavigation模块：

import { Navigation, HashNavigation } from 'swiper/modules';

2. 在swiper-container上显式声明启用的模块：

<swiper-container
    modules={[Navigation, HashNavigation]}
    slides-per-view={1}
    pagination={{ clickable: true }}
    class="checklist-swiper w-full"
    hashNavigation={{ enabled: true, watchState: true }}
>
    {#each categories as category}
        <swiper-slide class="flex flex-col items-center" data-hash={category.hash}>
            <p> blabla </p>
        </swiper-slide>
    {/each}
</swiper-container>

配置完成后，Swiper会自动监听URL哈希变化，包括初始加载时的哈希值，无需额外手动调用slideTo。

方案2：优化手动同步逻辑（原生配置失效时的补充）

如果原生配置仍存在初始加载同步问题（比如SvelteKit路由状态与Swiper初始化时机不匹配），可以用更优雅的响应式逻辑替代你的临时hack：

import { page } from '$app/stores';
import { onMount } from 'svelte';

let swiperRef;
let isSwiperReady = false;

// 监听Swiper初始化完成事件
onMount(() => {
    swiperRef?.swiper.on('init', () => {
        isSwiperReady = true;
    });
});

// 响应式同步哈希与幻灯片位置
$: if (isSwiperReady && $page.url.hash) {
    const targetHash = $page.url.hash.replace('#', '');
    const targetIndex = categories.findIndex(cat => cat.hash === targetHash);
    
    if (targetIndex !== -1 && swiperRef.swiper.activeIndex !== targetIndex) {
        // 第三个参数设为false，避免触发额外的哈希更新
        swiperRef.swiper.slideTo(targetIndex, 0, false);
    }
}

• 为什么之前onMount拿不到哈希？因为SvelteKit的page store是异步更新的，组件挂载时路由状态可能还未同步完成，用响应式语句监听$page.url.hash的变化可以完美解决这个问题。
• 加入isSwiperReady判断，避免在Swiper实例未初始化时调用API导致报错。

额外注意事项 #

• 确保data-hash的值与category.hash完全匹配，不要包含#前缀。
• 如果使用SvelteKit的路由刷新（比如goto方法跳转），可以配合hashNavigation.watchState配置，确保哈希变化时Swiper能及时响应。

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