Svelte Sapper如何检测路由变化 实现移动端导航选中后自动关闭

问题原因 #

你当前的代码逻辑仅在组件首次挂载到DOM时执行一次，Sapper的客户端路由跳转不会重新挂载上层布局组件（导航栏通常放在根布局文件中），因此路由切换时不会触发onMount内的逻辑。

解决方案 #

方案1：监听segment属性（最简单，适配你当前的代码结构）

Sapper会在每次路由变化时自动更新传给布局组件的segment属性，搭配Svelte的响应式声明语法$:即可实现路由变化监听：

<script>
    import CartWidget from '../shared/CartWidget.svelte'
    import { onMount } from 'svelte'

    export let segment = '';

    // 响应式监听，segment变化时自动执行代码块
    $: {
        const currentPath = window.location.pathname
        console.log(currentPath)
        // 此处添加关闭移动端导航菜单的逻辑即可，例如：
        // mobileMenuOpen = false
    }

    onMount(() => {
        let path = window.location.pathname
        console.log(path)
    })
</script>

方案2：使用Sapper内置page store（适合需要完整路由信息的场景）

如果需要获取路由查询参数、哈希等完整路由信息，可以使用Sapper内置的响应式page store：

<script>
    import CartWidget from '../shared/CartWidget.svelte'
    import { onMount } from 'svelte'
    // 导入Sapper内置stores
    import { stores } from '@sapper/app'

    const { page } = stores()
    export let segment = '';

    // 监听page store变化，路由更新时自动触发
    $: {
        const currentPath = $page.path
        console.log(currentPath)
        // 关闭移动端导航菜单逻辑
    }

    onMount(() => {
        let path = window.location.pathname
        console.log(path)
    })
</script>

如果后续你迁移到SvelteKit，仅需要将page的导入语句改为import { page } from '$app/stores'，其余使用逻辑保持一致。

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