带有 ASP.NET MVC / Backbone- AJAX 主页的单页应用程序

Question

我试图让我的应用程序在页面之间的导航方面完全 ajaxified（使用 Backbone.js 路由）。

所以我基本上做了我想做的一切，所有页面都正确加载，除了主页之外没有页面刷新。我隔离了为什么会发生这种情况，但我不知道如何修复它。对于以前使用过单页应用程序的任何人来说，这可能是一个非常简单的问题。

所以基本上我有这些主干路线：

    routes: {
        "": "renderHome",
        "!/:page": "renderPage"
    },
    renderHome: function () {
        pageView.render("Home");
    },
    renderPage: function (page) {
        pageView.render(page);
    }

Backbone PageView 有这样的渲染方法：

 render: function (page) {
        $(this.el).load("Navigation/" + page);
 }

基本上，/Navigation/anypage 通过 ajax 加载（不刷新） 但是 /Navigation/Home 会导致页面刷新。

但是，如果我简单地更改主页锚上的 href 来自：

<a class="navigationTab" href=""><span>Home</span></a>

到：

<a class="navigationTab" href="#!/Home"><span>Home</span></a>

它按应有的方式工作。但是我不希望我的主页是 www.website.com/#!/Home 这太丑了！！

我怎样才能保持主页的原始格式（没有主题标签）并且仍然可以在不刷新页面的情况下加载它。

我怀疑这是因为将 window.location.hash 更改为空白值会使其重新加载页面，但如果有标签，则它就像转到页面的不同部分，因此无需重新加载。我怎样才能防止这种情况发生？？

$('.navigationTab').click(function (event) {
    event.preventDefault();
    window.location.hash = $(this).attr('href');
}); 

Answer 1

基本上，hashtags 所做的是将 url 设置为相同的 url，但在其中添加 #(page) ......您可以通过在最后手动访问的任何页面上添加哈希来尝试并获得该页面'不刷新。

你有两个选择

选项一 - 使用 pushState

说来话长，您可能需要修改整个网站和服务器结构，因为在使用 pushState 时您可能会删除所有主题标签。

选项二 - 使用主题标签设置主页

<a class="navigationTab" href="/#"><span>Home</span></a>

通过这样做，您会将路由器设置为 Home，但最后会有一个标签