dagger.js 实现嵌套路由导航：对比 React Router 的另一种思路

Tony Peakman

1121人浏览 · 2025-09-22 21:17:10

Tony Peakman · 2025-09-22 21:17:10 发布

在这里插入图片描述

前端开发这几年，大家常常陷入一个悖论：
我们想写一个简单的 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>