Durandal SPA 接管常规网站路由答案

【问题标题】：Durandal SPA Taking Over Regular Website RoutingDurandal SPA 接管常规网站路由
【发布时间】：2013-10-17 02:16:13
【问题描述】：

我正在构建一个普通的旧网站，其中一个页面中有一个单页应用程序。导航栏上还有其他页面，例如 Home、About、Blog，我的应用位于 Dashboard 中。

查看我的 SPA 选项后，我决定尝试 Durandal，因为它似乎对我的 ASP.NET 网页站点最友好。我正在使用 Hot Towelette，因为它看起来是一个非常不错的软件包，尽管我可能会切换到普通的 Durandal，因为我可能没有使用所有 Towelettes 功能。

设置 Nuget 包后，我将 index.cshtml 更新为我的 dashboard.cshtml 并在导航栏上适当地链接它。从我的主页，我可以导航到仪表板，SPA 启动并运行良好。但是，当从仪表板单击主页按钮（或博客、关于等）时，页面只会将我返回到 SPA 的初始视图。

这是我从 index.cshtml 更改后的dashboard.cshtml。我没有对来自 Nuget 的热毛巾纸做任何其他更改。

@using System.Web
@using System.Web.Optimization
@{
    Layout = "Layout/_Layout.cshtml"; //<--- My nav bar with my other links are in here
}
<div id="applicationHost">
    @RenderPage("_splash.cshtml")
</div>

@Scripts.Render("~/scripts/vendor")
@if (HttpContext.Current.IsDebuggingEnabled)
{
    <script type="text/javascript" src="App/durandal/amd/require.js" data-main="/App/main"></script>
}

else
{
    <!-- Remember to run the Durandal optimizer.exe to create the main-built.js  -->
    <script type="text/javascript" src="App/main-built.js"></script>
}

问：如何在常规网站中设置 Durandal SPA 页面，而不让它接管我所有页面的路由？

编辑这是导航部分：

//Original
<nav>
    <a href="/">Home</a> 
    <a href="aboutus">About Us</a>  
    <a href="blog">Blog</a>
</nav>

将这些更改为以下内容似乎没有什么不同。此外，即使我使用的是 FriendlyUrls，它也会强制将 .cshtml 扩展名添加到 URL 中。

//Ineffective Changes
<nav>
    <a href="default.cshtml">Home</a> 
    <a href="aboutus.cshtml">About Us</a>  
    <a href="blog.cshtml">Blog</a>
</nav>

【问题讨论】：

你用的是什么版本的durandal？
最新版本：2.0.0

标签： javascript web-applications durandal single-page-application hottowel

【解决方案1】：

我知道的唯一解决方案是将链接中的 url 设为绝对，例如：

<a href="http://www.MyGreatPage.html"></a>

但我知道这并不总是可能的。
我会尝试提供更好的解决方案。

【讨论】：

感谢您的回复。由于我目前正在离线处理页面，我希望有另一种方法，因为当我使用正确的域名使网站上线时，我必须更新我的所有链接。

【解决方案2】：

您没有提供与导航栏中的链接相关的任何 html。听起来这就是问题所在。以下形式的任何链接都会触发durandal路由器：

<a href="#/dashboard">Dashboard</a>

任何如下形式的链接都会触发原生浏览器路由：

<a href="index.html">Index</a>

您能否验证 ASP.NET 是如何编译您的网页源代码的？

编辑

另一种选择是使用带有 javascript 导航 api 的点击绑定：

<a href="#" data-bind="click: function() { location.assign('index.cshtml') }">Index</a>

【讨论】：

感谢您的提示。这些变化似乎没有什么不同。请在上面查看我的编辑。
杜兰达尔的哪个版本？
最新版本：2.0.0
这应该就像让你的路线'/index.cshtml'一样简单

【解决方案3】：

也许最好重新考虑您的架构：

选项 1： 为您打算创建的每个 SPA 制作整个 Hot Towelette 项目。
选项 2： 相反，您可以考虑将整个网站制作为 SPA .
选项 3： 只需使用 Durandal 而不是您提到的热毛巾。 （如果您不想为每个 SPA 创建整个项目）

选项 4： 看看“HotTowelRouteConfig.cs”。在该文件中，引用了默认控制器和操作。您可以在默认路由前加上“spa”，结果将是：

Durandal: domain/spa/#/
（不打断你的其他路线）

选项 5： 查看控制器（在“HotTowelRouteConfig.cs”中命名），您可以向该控制器添加一些特定的操作。

选项 6： 使用前缀文件夹或其他内容创建一个全新的路由配置。 （选项 4 的逆）

Durandal： domain/#/
自定义路由： domain/pages/aboutus.cshtml

希望这会有所帮助。

【讨论】：

感谢您的意见。虽然我没有机会尝试您的所有建议，但选项 3 不起作用并且得到了相同的结果。我已经切换到 Sammy.js，它没有这个问题。

【解决方案4】：

由于没有其他答案被接受，我想投入 0.02 美元 -

确保动态设置的路线包含相对路径 -

 <a href="">Index</a>

而且你的 Durandal 路线是基于哈希的 - 请注意这里的区别是在 /

之前包含哈希

 <a href="/#index">Index</a>
 <a href="#index">Index</a>

这两种方法都能正常工作，并被 Durandal 的路由器正确拦截。

对于您的非 Durandal 路线，请使用相对路径 -

 <a href="/../index">Index</a>   
 <a href="/index">Index</a>   
 <a href="/controllerName/index">Index</a>

所有这些都应该起作用，具体取决于您定位视图的方式（控制器等...）

其他可能性

在之前的 Durandal 版本中，如果您有多个结束在同一文本中的路线，它会找到第一个。如果最重要的是，您有一条以相同文本结尾的非 Durandal 路线，它可能会做同样的事情。解决方法是使用guardRoute 确保只拦截正确的路由。

有两件事你可以尝试看看是否正在发生 -

router.mapUnknownRoutes(function(instruction){
    console.log(instruction);
    if (instruction.fragment === 'index.cshtml') {
         window.location('/' + instruction.fragment);
    }
});

在激活您的第一个路由之前，在您的 main.js 或您拥有的任何入口点中注册该处理程序，它应该会捕获任何未知的路由。此时检查指令的某些部分（在控制台中查看它包含的内容的更好细分）是否与 .cshtml 之类的内容匹配，如果是，则构建正确的 URI 字符串和 window.location 它。

这也将允许您覆盖错误的路由，以潜在地将它们指向自定义错误页面。

【讨论】：

感谢您的意见。我确实验证了我的应用程序具有正确的基于哈希的 URL，并且没有任何区别。我已经切换到 Sammy.js，它没有这个问题。
但是你没有验证你的非哈希路由
道歉；我确实验证了我的 SPA 路由是基于哈希的，而我的非 SPA 路由是相对路径，它似乎没有任何区别。

【解决方案5】：

由于没有其他选项适合我，最终我的解决方案是切换到 Sammy.js。我能够以几乎零的努力将 Sammy.js 放入我现有的应用程序中，并且它与我网站的其他部分没有冲突。另外，Sammy 的路由不会触发全屏导航，这意味着全屏应用程序在使用 Sammy.js 导航时将保持全屏状态。

【讨论】：