如何在 Durandal 中显示带有参数化路线的“未找到”页面答案

【问题标题】：How to display a "not found" page with parameterised route in Durandal如何在 Durandal 中显示带有参数化路线的“未找到”页面
【发布时间】：2015-10-20 14:39:53
【问题描述】：

我有一个 Durandal 应用程序，如果 URL 不对应于已知路由，我会使用 router.mapUnknownRoutes 显示用户友好的错误页面。这很好用——如果我去，比如/foo，并且它与路由不匹配，那么mapUnknownRoutes 指定的模块就会正确显示。

但是，当我有一个参数化路由时，我找不到任何方法来显示相同的错误页面，并且该参数与后端的任何内容都不匹配。

例如，假设我有一个类似people/:slug 的路由，其中对应模块的activate 方法如下所示：

this.activate = function (slug) {
    dataService.load(slug).then(function () {
        // ... set observables used by view ...
    });
};

如果我去，比如说/people/foo，那么结果取决于dataService.load('foo')是返回数据还是错误：

如果foo 存在于后端，那么没有问题 - 可观察对象已设置，合成继续。
如果foo 不存在，则抛出错误（因为不存在catch）。这会导致未处理的错误，从而导致导航被取消并且路由器停止工作。

我知道我可以从canActivate 返回false，并且导航将以更简洁的方式取消，而不会破坏路由器。然而，这不是我想要的；我想要一个无效的 URL 来告诉用户出了点问题。

我知道我可以从canActivate 返回{ redirect: 'not-found' } 或类似的东西。然而这很糟糕，因为它破坏了返回按钮——在重定向发生后，如果用户按下返回，他们会返回到/people/foo，这会导致另一个错误，因此会再次重定向回not-found。

我尝试了几种不同的方法，主要是在 Promise 定义中添加 catch 调用：

this.activate = function (slug) {
    dataService.load(slug).then(function () {
        // ... set observables used by view ...
    }).catch(function (err) {
        // ... do something to indicate the error ...
    });
};

activate（或canActivate）能否通知路由器该路由实际上是无效的，就好像它一开始就没有匹配到一样？
activate（或canActivate）能否发出rewrite（而不是redirect），以便路由器在不更改URL 的情况下显示不同的模块？
我可以直接compose某个其他模块代替当前模块（并取消当前模块的组合）吗？

我还尝试了一个空的 catch 块，它吞下了错误（我可以在这里添加一个 toast 来通知用户，这总比没有好）。然而，这会导致很多绑定错误，因为视图所期望的 observables 从未设置过。可能我可以将整个视图包装在 if 绑定中以防止错误，但这会导致空白页而不是错误消息；或者我必须将错误消息放入每个可能无法检索其数据的视图中。无论哪种方式，这都是视图污染而不是 DRY，因为我应该只写一次“未找到”错误消息。

我只想要一个无效的 URL（特别是一个匹配路由但包含无效参数值的 URL）来显示一个显示“找不到页面”的页面。当然，这也是其他人想要的东西吗？有什么方法可以实现吗？

【问题讨论】：

标签： javascript durandal durandal-2.0 durandal-navigation

【解决方案1】：

我认为您应该能够使用 activate 或 canActivate 方法中的以下内容。

router.navigate('not-found', {replace: true});

【讨论】：

感谢您的回答 Nathan，并为您的快速响应后的长时间延迟感到抱歉（说来话长，但我一直在从事其他工作，此后一直没有机会从事此项目我已经发布）。我尝试了您的建议，虽然它对我来说不太有效，但它为我指明了正确的方向。详情见我的回答。

【解决方案2】：

事实证明，内森的回答虽然不完全正确，但让我走上了正确的道路。我所做的似乎有点老套，但确实有效。

有两个选项可以传递给router.navigate() - replace 和 trigger。传递replace（默认为false）使用pushState 和replaceState（或使用哈希更改事件模拟相同）在历史插件之间切换。传递 trigger（默认为 true）在实际加载视图（并更改 URL）与仅更改地址栏中的 URL 之间切换。这看起来像我想要的，只是错误的方式 - 我想在不更改 URL 的情况下加载不同的视图。

（文档中有一些关于此的信息，但不是很详尽：http://durandaljs.com/documentation/Using-The-Router.html）

我的解决方案是导航到 not-found 模块并激活它，然后导航回原始 URL 而不触发激活。

所以在我的数据库查找模块中，在其activate 中，如果找不到记录，我会调用：

router.navigate('not-found?realUrl=' + document.location.pathname + document.location.hash, { replace: true, trigger: true });

（我意识到trigger: true 是多余的，但它使其明确）。

然后在not-found 模块中，它有一个activate，看起来像：

if (params.realUrl) {
    router.navigate(params.realUrl, { replace: true, trigger: false });
}

用户看到的是，它重定向到not-found?realUrl=people/joe，然后URL立即变回people/joe，而not-found模块仍然显示。因为这些都是replace 风格的导航，如果用户导航回来，他们会转到上一个条目，这是他们在单击断开的链接之前来自的页面（即返回按钮应该做什么）。

就像我说的，这看起来很老套，我不喜欢 URL 闪烁，但这似乎是我能做的最好的了，而且大多数人不会注意到地址栏。

Working repo that demonstrates this solution

【讨论】：