Backbone.js 木偶/主干应用程序，标签中的href不'；不要走规定的路线

这是我在index.html中的A标记

<div class="menu-item"><a href="/#login">Login in</a>

这是我的路由器代码：

var Backbone = require('backbone');
var $ = require('jquery');
    Backbone.$ = $;
var _ = require('lodash');

var Marionette = require('backbone.marionette');
var OuterLayout = require('../layout/outerLayout/outerLayout');
var ol = new OuterLayout();
var AppRouter = Backbone.Marionette.AppRouter.extend({
    routes : {
        '': 'index',
        'signup' : 'signup', 
        'login' : 'login'
    }, 
    index : function () {
        if(_.isEmpty(ol.el.innerHTML)) {
            ol.render();
        } 

        // outerLayout.footer.show();    
    }, 
    signup : function () {
        if(_.isEmpty(ol.el.innerHTML)) {
            ol.render();
        }
        var ContentSignup = require('../layout/outerLayout/view/contentSignup/contentSignup');

        ol.content.show(new ContentSignup());
    }, 
    login: function () {
        if(_.isEmpty(ol.el.innerHTML)) {
            ol.render();
        }
        var ContentLogin = require('../layout/outerLayout/view/contentLogin/contentLogin');

        ol.content.show(new ContentLogin());
    }    
});

module.exports = AppRouter;

结果是浏览器地址输入字段中的URL发生更改，但页面内容不变。然后，如果我点击CMD+R刷新页面，那么内容将发生变化，正确反映路线

此外，浏览器上的“返回”按钮不起作用，url会更改，但内容不会更改。我想我忘了在我的代码中调用某物来“刷新”浏览器

哦，我正在为这个前端开发启动一个迷你http服务器

您是否尝试过以下方法：

new AppRouter();

而不是这个

new Router();

---

除非你真的想点击服务器（这只是

/login

，你可以在服务器端处理）。你应该采取酒吧-酒吧-酒吧的方式

所以在你看来，你会说：

触发 “单击。菜单项”：“loginClicked”

然后，您可以在控制器中侦听该事件（如果您所在的是复合视图的子视图，则可能需要在其前面加上

childview:

）：

然后在路由器中

API =
    login: ->
      new LoginsApp.Show.Controller

  App.vent.on "login:clicked", ->
    App.navigate "/login" 
    API.login()

因此，你最终导航/点击与通过路由器相同的动作，但你不必依赖路由

如果你不想走那条路线，我想问题是你需要说

Backbone.history.navigate（{trigger:true}）

，让它在Approver中实际触发路线

我发现的最好的方法是，当用户单击刷新或直接导航到页面时，Approver就在那里。但其他一切都应该在应用程序中使用pub-sub方法处理。通过这种方式，它为您提供了最大的控制。

删除斜杠（/）并在HREF上仅使用“#route”，以避免浏览器从后端获取“/”处提供的默认文档

顺便说一句，注意使用require，您应该在顶部要求构造函数，这样requirejs优化器就可以在构建时填充依赖项

比如：

//this before the component definition
var MyView = require("views/myview"),
    AppLayout = require("views/layout");

//... later on your view/app/model definition

function foo(){
  var view = new MyView();
}

我还认为，在任何文件的顶部列出

require

d内容有助于以后理解它

我试过了。结果是“无法获取/登录”。如果我删除#，路由器似乎无法解析路由。在删除#之前，有什么需要配置的吗？

API =
    login: ->
      new LoginsApp.Show.Controller

  App.vent.on "login:clicked", ->
    App.navigate "/login" 
    API.login()

//this before the component definition
var MyView = require("views/myview"),
    AppLayout = require("views/layout");

//... later on your view/app/model definition

function foo(){
  var view = new MyView();
}