SvelteKit动态路由导航时页面不刷新问题及原理问询

问题场景 #

基于动态路由/[slug]实现页面切换时，点击导航栏的A/B/C链接，页面内容始终停留在第一次进入的slug值（比如从首页进A后，切B/C仍显示A），必须刷新页面才会显示正确内容。将const { slug } = data替换为$: slug = data.slug后问题解决，核心原因在于SvelteKit的页面复用机制。

原理解释 #

• 页面复用逻辑：SvelteKit在切换同模板的路由（比如/a和/b都对应/[slug]的+page.svelte组件）时，不会销毁并重建页面组件实例，而是复用现有组件，仅更新组件的data等传入属性。
• 原代码的问题：const { slug } = data是组件初始化时的一次性解构赋值，后续data因路由切换更新时，这个常量不会重新赋值，页面自然不会显示新的slug。
• 反应式语句的作用：$:是Svelte的反应式声明，它会监听右侧依赖（data.slug）的变化。当路由切换导致data更新时，data.slug的变动会触发该语句重新执行，slug变量被更新为最新值，页面随之渲染新内容。

其他解决方式 #

• 直接在模板中使用{data.slug}，跳过中间变量，模板会直接响应data的变化
• 使用let { slug } = data配合反应式解构：$: ({ slug } = data)，同样能监听data的更新并同步变量值

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