javascript - 路由灵活的 JavaScript 单页应用程序？

Question

我正在构建一个单页 Web 应用程序(因为我想要跨页面/状态移动时的灵 active 和速度)但我正在努力处理路由/网址......

在传统的范例中，我会有这样的 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/

现在我想用一个为相应路由加载模板和 Controller 的路由器(例如使用 Backbone)替换它。

我正在考虑拥有一个存储必要页面信息的页面对象:

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 方案有意义，同时仍然灵活并允许重定向和新的查询字符串参数？

Answer 1

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

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

如果您将使用伪查询字符串，请确保在您的 Backbone 路由中明确地为它们添加一个匹配器。例如:

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

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