Durandal SPA Taking Over Regular Website Routing

Question

I'm building a plain old website that has a single page application in one of it's pages. There are other pages on the nav bar, such as Home, About, Blog, with my app being in Dashboard.

After looking through my SPA option, I've decided to try Durandal because it's seems the most friendly with my ASP.NET Web Pages site. I'm using Hot Towelette as it appears to be a pretty nice package, although I may switch to plain Durandal since I might not be using all of Towelettes features.

After setting up the Nuget package, I updated the index.cshtml to my dashboard.cshtml and linked it appropriately on the nav bar. From my home page, I can navigate to the dashboard and the SPA kicks in and runs fine. However, when click the home button (or blog, about, etc.) from the dashboard, the page just returns me to the initial view of the SPA.

Here's my dashboard.cshtml after I changed it from index.cshtml. I have made no other changes to the Hot Towelette stuff that came down from 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>
}

Q: How do I setup a Durandal SPA page in a regular website without having it take over for routing for all of my pages?

Edit Here is the nav section:

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

Changing those to the following doesn't appear to make a difference. Also, it forces the .cshtml extension into the URL, even though I am using FriendlyUrls.

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

Answer 1

Since no other options worked for me, ultimately my solution was to switch to Sammy.js. I was able to drop in Sammy.js into my existing application with near zero effort and it didn't not conflict with the rest of my website. As an added bonus, Sammy's routing does not trigger a full navigation, which means that a fullscreen application will remain fullscreen when navigating with Sammy.js.