Javascript backbone.js中的pushState

我正在尝试让pushState在我的主干应用程序中工作。只需单击链接即可正常工作。但是如果我刷新一个页面，我会得到404

路由器

Router = Backbone.Router.extend({
    routes: {
        'home': 'home'

    },

    home: function() {
        new HomeView({el:'#main-view'})
    }
});

单击a-tag时：

event.preventDefault();
App.navigate(event.target.pathname, { trigger: true });

开始历史记录：

Backbone.history.start({pushState:true});

和html：

                <li>
                    <a href="/home">home</a>
                </li>

这里出了什么问题？

问题是您使用了一个真正的HTML链接，因此它会刷新页面，这是正常的行为。 但您只希望更改当前路由，而不希望重新加载页面

为此，您可以处理链接，对主干说：处理我的链接

下面是一个JS示例，我使用它来处理以innerlink CSS类作为路由的链接

'use strict';
var Backbone = require('backbone');
var $ = require('jquery');
Backbone.$ = $;

module.exports = function() {
  // Use absolute URLs  to navigate to anything not in your Router.

  var openLinkInTab = false;

  // Only need this for pushState enabled browsers
  if (Backbone.history._hasPushState) {


    // console.log('YES you have push state !');

    $(document).keydown(function(event) {
      if (event.ctrlKey || event.keyCode === 91) {
        openLinkInTab = true;
      }
    });

    $(document).keyup(function() {
      openLinkInTab = false;
    });

    // Use delegation to avoid initial DOM selection and allow all matching elements to bubble
    $(document).on('click', 'a.innerlink', function(evt) {
      // Get the anchor href and protcol
      var href = $(this).attr('href');
      var protocol = this.protocol + '//';

      console.log('backbone_pushstate_router:', href, protocol);

      evt.preventDefault();

      // Ensure the protocol is not part of URL, meaning its relative.
      // Stop the event bubbling to ensure the link will not cause a page refresh.
      if (!openLinkInTab && href.slice(protocol.length) !== protocol) {
        evt.preventDefault();

        // Note by using Backbone.history.navigate, router events will not be
        // triggered.  If this is a problem, change this to navigate on your
        // router.
        Backbone.history.navigate(href, true);
      }
    });
  } else {
    console.warn('no push state');
  }
};

---

享受：

当然可以，我敢打赌你没有这个URL提供的任何页面。这是一个单页应用程序。在主干网中，你不能像我所知道的那样以一种好的方式加载页面。每个视图都加载自己的模板。Underline.js.From-请注意，使用真实URL需要您的web服务器能够正确呈现这些页面，因此还需要进行后端更改。此外，这可能有助于您理解@Evgeniy right。如果该页面获得404，则意味着您的服务器无法找到路由。