关于Durandal子路由挂载至父路由及菜单构建的技术问询

1. 完全可以将子路由附加到父路由 #

Durandal的路由系统天生支持嵌套路由结构，你完全可以把子路由直接附加到对应的父路由配置项中，而且所有路由都能集中在同一个主路由对象里管理，刚好满足你用这个对象构建二级菜单的需求。

2. 单文件统一配置示例 #

这里给你一个具体的代码示例，把所有路由都定义在同一个主路由对象中：

// 统一路由配置文件（比如router-config.js）
export const mainRoutes = [
    {
        route: '',
        moduleId: 'views/home',
        title: '首页',
        nav: true
    },
    {
        route: 'products',
        moduleId: 'views/products/index',
        title: '产品管理',
        nav: true,
        // 嵌套子路由到父路由下
        routes: [
            {
                route: '',
                moduleId: 'views/products/list',
                title: '产品列表'
            },
            {
                route: 'detail/:id',
                moduleId: 'views/products/detail',
                title: '产品详情'
            },
            {
                route: 'add',
                moduleId: 'views/products/add',
                title: '添加产品'
            }
        ]
    },
    {
        route: 'orders',
        moduleId: 'views/orders/index',
        title: '订单管理',
        nav: true,
        routes: [
            {
                route: '',
                moduleId: 'views/orders/list',
                title: '订单列表'
            },
            {
                route: 'tracking/:id',
                moduleId: 'views/orders/tracking',
                title: '订单追踪'
            }
        ]
    }
];

然后在应用启动时，把这个主路由对象传给Durandal的路由配置：

// main.js
import { mainRoutes } from './router-config';
import app from 'durandal/app';
import router from 'durandal/plugins/router';

app.start().then(() => {
    router.configure(config => {
        config.map(mainRoutes);
        config.mapUnknownRoutes('views/not-found');
    });
    app.setRoot('views/shell');
});

3. 利用主路由对象构建二级菜单 #

因为所有路由都集中在mainRoutes里，你可以直接在Shell视图中遍历这个对象来生成二级菜单，比如用Knockout的foreach绑定：

<!-- shell.html -->
<div class="main-navigation">
    <ul class="parent-nav">
        <!-- 遍历父路由 -->
        <!-- ko foreach: router.navigationModel -->
        <li data-bind="css: { active: isActive }">
            <a data-bind="attr: { href: hash }, text: title"></a>
            <!-- 如果父路由有子路由，渲染二级菜单 -->
            <!-- ko if: routes && routes.length > 0 -->
            <ul class="sub-nav">
                <!-- ko foreach: routes -->
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: $parent.hash + '/' + route }, text: title"></a>
                </li>
                <!-- /ko -->
            </ul>
            <!-- /ko -->
        </li>
        <!-- /ko -->
    </ul>
</div>

小提示 #

• 子路由的moduleId要确保路径正确，可以基于父路由视图路径或者项目根路径设置
• 给子路由里的空路由（route: ''）设置moduleId，访问父路由路径时会自动加载该子视图
• 父路由的nav属性控制是否在主导航显示，子路由一般不需要设置nav，我们通过父路由的routes来渲染二级菜单

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