dagger.js 实现嵌套路由导航：对比 React Router 的另一种思路
前端开发这几年，大家常常陷入一个悖论：
我们想写一个简单的 Demo 或原型，却不得不从
npm install、vite.config.js、再到一大堆依赖配置开始。
明明只是一个路由跳转的功能，为什么要把整条构建流水线搬上来？
React Router、Vue Router 功能强大，但也都依赖庞大的生态和编译环境。
而 dagger.js
选择了另一条路：直接运行在浏览器，零构建，纯运行时。
这篇文章，我们就通过一个 CodePen 示例，看看 dagger
路由是如何实现嵌套导航的，并与 React Router 做一个对比。
示例概览
这份示例实现了一个小型的"球员名册"应用：
- 首页
Home - 球员列表
Roster - 球员详情
Player/:number - 比赛日程
Schedule
整个路由和视图关系如下：
/home -> Home
/roster -> Roster 列表
/roster/:id -> 球员详情
/schedule -> Schedule
核心亮点在于：
所有路由声明都在 JSON 中完成，不依赖 JSX 或编译。
dagger 路由的写法
- 定义路由表
<script type="dagger/routers">
{"default": "/home","routing": {"children": [{ "path": "home", "constants": { "view1": "home" }, "modules": ["home"] },{"path": "roster","tailable": true,"constants": { "view1": "roster", "view2": "full__Roster" },"modules": ["roster"],"children": [{"path": ":number","constants": { "view2": "player" },"modules": ["player"]}]},{ "path": "schedule", "constants": { "view1": "schedule" }, "modules": ["schedule"] }]}
}
</script>
default：默认路由\tailable: true：允许继续追加子路由:number：动态参数，可通过$route.params.number读取constants.view1/view2：告诉视图占位符该渲染哪个模板
- 模块映射
<script type="dagger/modules">
{"home": "#home","roster": "#roster","fullRoster": "#fullRoster","player": "#player","schedule": "#schedule"
}
</script>
模块与 <template> 的映射，类似于 React Router 里的
Route -> Component。
- 视图占位符
<main dg-cloak><template *html="$route.constants.view1"></template>
</main><template id="roster"><template *html="$route.constants.view2"></template>
</template>
$route.constants.view1渲染一级页面\$route.constants.view2用来渲染嵌套子页面
- 导航和参数
<li *each="PlayerAPI.all()"><a *href="`roster/${item.number}`">${item.name}</a>
</li><template id="player"><div +load="{ player: PlayerAPI.get($route.params.number) }"><div *exist="player"><h1>${player.name} (#${player.number})</h1></div><div *exist="!player">Sorry, but the player was not found</div></div>
</template>
*href会自动走 SPA 内部跳转，相当于 React Router 的<Link>\$route.params.number读取路径参数\+load生命周期钩子：路由进入时加载数据
与 React Router 对比
方面 dagger.js React Router
路由声明 JSON 配置 + 模板占位 JSX <Route>
嵌套路由 父子节点 + tailable 嵌套 <Route>
参数获取 $route.params useParams()
内部导航 <a *href> <Link>
生命周期 +load 指令 useEffect / 生命周期函数
可以看到，dagger 用"指令 + 模板"的方式，把路由逻辑与渲染解耦。它不需要构建工具，也不需要学习复杂
API。
最小可复用模板
如果你要在项目里快速上手，可以直接复制以下模式：
<script type="dagger/routers">
{"default": "/list","routing": {"children": [{ "path": "list", "constants": { "view": "list" }, "modules": ["list"] },{"path": "detail","tailable": true,"constants": { "view": "detail" },"modules": ["detail"],"children": [{ "path": ":id", "modules": ["detail"] }]}]}
}
</script><script type="dagger/modules">
{"list": "#tpl-list","detail": "#tpl-detail"
}
</script><main dg-cloak><template *html="$route.constants.view"></template>
</main>
总结
React Router 强大，但依赖构建工具和生态。
dagger.js 路由则强调 纯运行时、无构建、0 依赖，尤其适合
Demo、原型、嵌入式应用。
用 JSON 定义路由、用模板做视图占位、用 *href 导航、用 $route.params
取参数 ------ 简单直观。
对于那些希望快速开发、轻量运行的场景，dagger
路由是一个非常值得尝试的选择。
推荐阅读 / 延伸链接
- 🌐 dagger.js 官网
– 指令与路由文档\ - 🎨 CodePen dagger.js 示例合集
– 官方在线演示 - 📖 React Router 官方文档 –
作为对比学习参考 - 📚 Shoelace Web Components – 可与 dagger
搭配使用的现代组件库