骨干路由不工作答案

【问题标题】：Backbone routes are not working骨干路由不工作
【发布时间】：2023-03-18 11:04:01
【问题描述】：

我正在创建一个简单的Backbone 应用程序，但路由不起作用。这是我的路由器。

define(function(require) {
  'use strict';

  var Backbone = require('backbone');
  var Header = require('views/header.view');
  var MainBody = require('views/main.body.view');

  var Router = Backbone.Router.extend({
    routes: {
      "": "main",
      "about/": "about"
    },

    main: function() {
      var header = new Header();
      $('#header').html(header.render());

      var body = new MainBody();
      $('#app').html(body.render());
    },

    about: function() {
      console.log("About");
    }
  });

  return Router;
});

我按预期点击了/ 路由，但是当我转到/about 时，它永远不会点击about 函数。我应该在某个地方的网址中有一个哈希吗？我还缺少什么会导致此问题？

【问题讨论】：

你试过去#about 吗？
那行得通。从中做出答案，以便我接受。

标签： javascript backbone.js

【解决方案1】：

因为路由是显式匹配的，所以"about/": "about"会匹配/about/，"about": "about"会匹配/about

有一种方法可以同时匹配 /about 和 /about/，它需要使用可选匹配器 (matcher)，因此您的路由哈希键将如下所示

"about(/)": "about"

要使无哈希路由正常工作，您需要运行 Backbone.history.start({pushState: true})。

【讨论】：

我试过 about 和 about(/) 都没有工作。我得到的错误是Cannot GET /app/about。
如果#about 工作，那么你运行Backbone.history.start()。要使/about 工作，您需要运行Backbone.history.start({pushState: true})（它不适用于IE8 及更低版本）。

【解决方案2】：

根据backbonejs文档，路由器应该定义和寻址如下：

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

因此，当你输入http://<URL>/backbonepage#help时，会调用帮助函数

【讨论】：