使用 MVC 区域的多个 SPA - 在 SPA 路由器路由之外导航

Question

当我想在路由器中设置的路由设置列表之外导航时，如何逃避客户端路由？

我使用 Durandal.js 创建了一个项目，并在不同的区域内创建了 SPA。我运行遇到的问题是，当我想导航到当前 SPA 之外并进入另一个或说回到整个应用程序的主页时，它根本不是 SPA，而只是一个 cshtml 页面。

我尝试做的是使用 Du运行dal 的 mapUnknownRoutes 处理程序进行拦截，然后使用 window.location.href 导航出去。这行得通，但是当我想转到应用程序的主页（“/”）时，路由器匹配 SPA 的 "root" 并且不会导航到主页，而是导航到 SPA 的根路由。

此示例中的区域路由是“/spaHome”，其 MVC 路由如下所示：

context.MapRoute(
           "spaHome_default",
           "spaHome/{*catchall}",
           new { controller = "Home", action = "Index", id = UrlParameter.Optional }
       );

以下是我设置 Du运行dal 路由器所做的工作：

var routes = [
    { route: ['spaHome', ''], moduleId: 'spaHome', title: "spaHome", hash: "#spaHome"},
    { route: 'one/anotherPage', moduleId: 'one/anotherPage', title: "one/anotherPage", hash: "#one/anotherPage"}
];

router.makeRelative({ moduleId: 'viewmodels' });

router.map(routes)
      .mapUnknownRoutes(function (instruction) {
          utils.navigateToPath(instruction.fragment);
          return false;
      })
      .activate({ pushState: true, root: "/spaHome" });

任何指向正确方向的指示或线索将不胜感激！

Answer 1

经过反复试验，我想出了一个解决方案来解决我想要完成的事情。它看起来像是一个可靠的解决方案，所以希望它不会在未来造成任何问题。

我更改了路由数组并从第一条路由中删除了默认路由“”。当我想访问普通的 MVC 主页时，这让我有一条未知的路线可以离开。我还必须从路由器的激活功能中删除 "root" 属性。这反过来意味着我必须在路由数组中使用额外区域部分或 URL ("spaHome/").

显式声明路由

然后在我的 mapUnknownRoutes 处理程序中，我检查了 URL 区域部分的路由，如果存在，我使用 SPA 路由器显示该 SPA 的未找到页面。否则我假设该路线存在于该区域之外，我需要使用 window.location.href.

硬导航到 URL

var routes = [
    { route: ['spaHome'], moduleId: 'spaHome', title: "spaHome", hash: "#spaHome"},
    { route: 'spaHome/one/anotherPage', moduleId: 'one/anotherPage', title: "one/anotherPage", hash: "#spaHome/one/anotherPage"}
];

router.makeRelative({ moduleId: 'viewmodels' });

router.map(routes)
  .mapUnknownRoutes(function (instruction) {
      if (instruction.fragment.toLowerCase().indexOf("spaHome/", 0) === -1) {
            utils.navigateToPath(instruction.fragment);
      } else {
            var notfoundRoute = "notfound";
            instruction.config.moduleId = notfoundRoute;
            history.navigate(notfoundRoute, { trigger: false, replace: true });
      }
  })
  .activate({ pushState: true });

如果谁有更好的解决方案请告诉我！

编辑

好的，我运行在执行此操作时遇到了历史问题。我必须在 Du运行dal router.js 文件中添加一行，以阻止将之前的路由添加到历史队列中。

 if (!instruction.cancelQueue) {
                router.trigger('router:route:before-config', instruction.config, router);
                router.trigger('router:route:after-config', instruction.config, router);
                queueInstruction(instruction);
            }

编辑 2

我也运行遇到了此方法的问题，即导航在 IE9 及以下版本中不能正常工作。

使用 MVC 区域的多个 SPA - 在 SPA 路由器路由之外导航

Multiple SPA Using MVC Areas - Navigate Outside SPA Router Routes

asp.net-mvc

single-page-application

durandal

asp.net-mvc-areas

durandal-navigation