Svelte 5提取page.js路由到外部模块后路由失效问题求助

核心问题出在响应性传递断裂：当你把$state放在外部模块，在App.svelte里用let Page = router.page赋值时，这只是一次性获取初始值，Svelte的响应性系统不会自动追踪这个getter后续的状态变化。

修复方法：用$derived建立响应性连接 #

在App.svelte中，把直接赋值改成用$derived推导Page的值，让Svelte自动追踪router.page背后的$state变化：

<!-- App.svelte -->
<script lang="ts">
    import {createRouter} from "./router.svelte";
    const router = createRouter()
    router.registerRoutes()
    // 用$derived替代直接赋值，建立响应性依赖
    const Page = $derived(router.page)
</script>

<Page/>

为什么原写法失效？ #

Svelte 5的响应性基于上下文追踪：在组件<script>里直接使用$state时，组件会自动订阅其变化。但$state在外部模块时，组件里的普通变量不会主动监听getter背后的状态更新。$derived的作用就是明确告诉Svelte：这个值依赖其他响应性状态，需要实时同步更新。

额外注意事项 #

• 确保router.start()只被调用一次，避免重复注册路由规则
• 路由跳转链接需配合page.js的机制实现，比如用router.show()并阻止默认跳转：<a href="/about" onclick="event.preventDefault(); router.show('/about')">关于页</a>，也可以封装成复用组件

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