转到某个页面然后返回时，Url 不会返回到基本状态

Question

我无法理解为什么在我的 Durandal 应用程序中，当我转到详细信息页面然后返回列表后，我会得到一个 url，其中详细信息页面的 url 嵌入在当前 URL 中。

例如：

当我开始时，我有：http://localhost:51429/#/

然后我去详情页：http://localhost:51429/physDetail

然后我回到列表页面：http://localhost:51429/physDetail#/physList

为什么我在 url 中嵌入了“physDetail#”？问题是，如果我按 F5 刷新 html，我会得到 404。

我正在设置这样的路线：

  var routes = [{
    url: 'physList',
    moduleId: 'viewmodels/physList',
    name: 'Physicians',
    visible: true
  }, {
    url: 'physDetail',
    moduleId: 'viewmodels/physDetail',
    name: 'View Physician Detail',
    visible: false
  }, {
    url: 'incentives',
    moduleId: 'viewmodels/incentiveList',
    name: 'Incentives',
    visible: true
  }, {
    url: 'membershipList',
    moduleId: 'viewmodels/membershipList',
    name: 'Membership',
    visible: true
  }];

通过单击列表中的一行来切换到详细信息页面。 列表 HTML 如下所示：

 <tbody data-bind="foreach: $root.physicians, delegatedHandler: 'click'">
    <tr data-click="physClicked">
    <td data-bind="text: contact_LastName"></td>
    <td data-bind="text: contact_FirstName"></td>
    <td data-bind="foreach: contact_Phones">
        <span data-bind="phoneFormat: fullPhone"></span>
    </td>
    <td data-bind="foreach: contact_Emails">
        <span data-bind="emailFormat: address"></span>
    </td>
    </tr>
 </tbody>

js 处理程序如下所示：

function physClicked(phys, event) {
  router.navigateTo("physDetail");
  return;
}

通过单击页面顶部的按钮返回列表（或其他页面）。按钮 HTML 如下所示：

<div class="btn-group" data-bind="foreach: router.visibleRoutes">
  <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
     class="btn btn-info" href="#"></a>
</div>

我应该禁止跳转到另一个页面吗？我应该只允许后退按钮还是在保存或取消后执行 router.navigateBack() ？

我试图在 Durandaljs 网站上找到一些关于此的指导，但要么不存在，要么我不知道要问的正确问题。

感谢您的任何见解。

Answer 1

您应该考虑将 url 参数转换为路由。这可能是搞乱你的 url 哈希创建的事情。设置默认路由也是一个好主意。这将是评估为空哈希或根本没有哈希的值。在 Durandal 2.x 中，路由对象可以接受一个数组而不仅仅是一个字符串。您可以将数组中的第一项设置为空字符串，以表示如果没有找到哈希值，这是您的 url 的默认路由。

var routes = [{
  route: ['', physList'],
  moduleId: 'viewmodels/physList',
  name: 'Physicians',
  visible: true
}, {
  route: 'physDetail',
  moduleId: 'viewmodels/physDetail',
  name: 'View Physician Detail',
  visible: false
}, {
  route: 'incentives',
  moduleId: 'viewmodels/incentiveList',
  name: 'Incentives',
  visible: true
}, {
  route: 'membershipList',
  moduleId: 'viewmodels/membershipList',
  name: 'Membership',
  visible: true
}];

Answer 2

我仍然不明白为什么“#physDetail”会插入 URL，但决定只允许使用 router.navigateBack() 的“goBack”选项返回原始医生列表。这样可以规避问题，并可能使用户体验更加统一。

我通过给 <div class="btn-group"...> 一个 id 并在 physDetail.js 的激活中执行 jQuery“隐藏”来做到这一点。这将阻止导航到其他列表。

执行 navigateBack() 时，URL 是干净的，并且其中没有“#physDetail”。