对话框和路由器都是插件，彼此之间没有交互。
还有路由器显示对话框会忽略路由器的工作方式 - 它有一个 div 可以将内容转储到其中。对话框存在于所有这些之外。
但是，如果您愿意（我也可以这样做），您可以试试这个。
将dialog: true 添加到路线图。
覆盖router.loadUrl 方法。检查路由是否是我们之前标记的对话框路由，并激活对话框。
我会将对话框设为子路由，这样您就可以知道在对话框下方显示哪个视图。否则，您可能只需要在任何内容上显示对话框并完全忽略路由。
编辑：我认为这实际上不会完全有效。 loadUrl 返回一个布尔值。您可以打开对话框并返回 false 以取消导航。
编辑2：
我的尝试
loadUrl 方法循环遍历所有路由，并且每个路由都有一个回调，所以理想情况下我们需要将我们的逻辑插入到这个数组中。
for (var i = 0; i < handlers.length; i++) {
var current = handlers[i];
if (current.routePattern.test(coreFragment)) {
current.callback(coreFragment, queryString);
return true;
}
}
这个数组是使用路由器route 方法添加的。当你映射路线时，Durandal 会调用这个方法，所以理想情况下，我们可以在路线配置中添加一些额外的参数，让 Durandal 处理这些。但是configureRoute 函数是路由模块的内部函数，因此我们需要对其进行编辑，并确保在将来更新 Durandal 时复制更改。
我创建了一个新的对话路由列表：
{ route: 'taxcode/add(/:params)', moduleId: 'admin/taxcode/add', title: 'Add Tax Code', hash: '#taxcode/add', nav: false, dialog: true, owner: '#taxcodes' },
{ route: 'taxcode/edit/:id', moduleId: 'admin/taxcode/edit', title: 'Edit Tax Code', hash: '#taxcode/edit', nav: false, dialog: true, owner: '#taxcodes' }
所有者的想法是，如果存在初始路线是这样的情况，我们需要对话框后面的东西。
现在将configureRoute 中的router.route 调用替换为：
router.route(config.routePattern, function (fragment, queryString) {
if (config.dialog) {
if (!router.activeInstruction()) {
// No current instruction, so load one to sit in the background (and go back to)
var loadBackDrop = function (hash) {
var backDropConfig = ko.utils.arrayFirst(router.routes, function (r) {
return r.hash == hash;
});
if (!backDropConfig) {
return false;
}
history.navigate(backDropConfig.hash, { trigger: false, replace: true });
history.navigate(fragment, { trigger: false, replace: false });
queueInstruction({
fragment: backDropConfig.hash,
queryString: "",
config: backDropConfig,
params: [],
queryParams: {}
});
return true;
};
if (typeof config.owner == 'string') {
if (!loadBackDrop(config.owner)) {
delete config.owner;
}
}
if (typeof config.owner != 'string') {
if (!loadBackDrop("")) {
router.navigate("");
return; // failed
}
}
}
var navigatingAway = false;
var subscription = router.activeInstruction.subscribe(function (newValue) {
subscription.dispose();
navigatingAway = true;
system.acquire(config.moduleId).then(function (dialogInstance) {
dialog.close(dialogInstance);
});
})
// Have a route. Go back to it after dialog
var paramInfo = createParams(config.routePattern, fragment, queryString);
paramInfo.params.unshift(config.moduleId);
dialog.show.apply(dialog, paramInfo.params)
.always(function () {
if (!navigatingAway) {
router.navigateBack();
}
});
} else {
var paramInfo = createParams(config.routePattern, fragment, queryString);
queueInstruction({
fragment: fragment,
queryString: queryString,
config: config,
params: paramInfo.params,
queryParams: paramInfo.queryParams
});
}
});
确保将dialog 导入到模块中。