Question

我试图让我的应用程序在页面之间的导航（使用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 FROM：

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

TO：

<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，但最后会有一个＃标签

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

1 个答案:

选项一 - 使用pushState

选项二 - 使用＃标签