灵活的 JavaScript 单页应用程序的路由？答案

【问题标题】：Routing for flexible JavaScript Single-Page-App?灵活的 JavaScript 单页应用程序的路由？
【发布时间】：2012-01-01 06:57:03
【问题描述】：

我正在构建一个单页网络应用程序（因为我希望在跨页面/状态移动时具有灵活性和速度）但我正在努力处理路由/url ...

在传统范例中，我会使用以下网址：

example.com/tools/population-tool/#currentYear=1950
example.com/tools/income-tool/#country=usa
example.com/nice-story/
example.com/nice-chapter/nice-story/

现在我想用一个为相应路由加载模板和控制器的路由器（例如使用 Backbone）替换它。

我正在考虑使用一个 pages 对象来存储必要的页面信息：

pages : {
  tools : {
    template : "#tools",
    breadcrumb : ["Home","Tools"]
  }
  nice-story : {
    template : "#nice-story",
    breadcrumb : ["Home","Stories","Nice Story"]
  }  
}

有了路由器，我现在想加载正确的内容和页面状态，给定一个像这样的 url：

example.com/#!/tools/population-tool/?currentYear=1950

如果不使用Hashbang，也可以这样：

example.com/tools/population-tool/?currentYear=1950

您将如何组织此路由以使 url 方案有意义，同时仍然灵活并允许重定向和新的查询字符串参数？

【问题讨论】：

我找到了这个主干插件：github.com/jhudson8/backbone-query-parameters。您只需将其插入即可开始使用。

标签： javascript backbone.js router hashbang

【解决方案1】：

这不是您问题的完整答案，而是关于 Backbone 的一些提示...

您可能希望在您的路由器上定义一个类似 loadPage() 的方法，该方法可以清空您的主页容器并将其替换为与您应用中的每个“页面”相对应的视图。每个路由动作都可以调用它来加载正确的视图。

如果您将使用伪查询字符串，请确保在您的主干路由中显式地为它们添加匹配器。例如：

'/tools/population-tool/?*params'

这将调用您的路由操作，并将整个 params 字符串作为第一个参数。你需要解析它...

【讨论】：

感谢您的回复！这是否意味着将所有页面明确列为路由？我希望有一个更简单的解决方案，比如 ':page/:subpage/?*params' ??谢谢。
如果你愿意，你可以这样做。然后，您只需将所有逻辑移动到一个可以检查您的“页面”对象的路由功能中。我认为定义 1:1 的页面路由更为常见，但这取决于您的用例。