Logo
Section 1 / 7

简介:URLs 与多页面应用

学习如何添加网址并创建多页面应用程序。

导入

简介:URLs 与多页面应用

学习如何添加网址并创建多页面应用程序。

到目前为止,我们一直在单个页面上构建所有内容。我们不断向一个 div 中添加新的图表和交互组件,并根据需要灵活地整合它们。添加新的 URL 有助于节省空间,避免单页上堆积过多组件。URL 还可以作为内容分类的工具,为用户提供上下文信息,让他们清楚自己所在的位置以及正在执行的操作。

...

更有趣的是,我们可以通过基于 URL(或其任意部分)来动态显示内容,轻松地为应用生成大量额外页面。这正是本节将要实现的目标。

在了解 Location 和 Link 组件的工作原理后,我们将对应用结构进行小幅调整,创建并隔离新的布局。之后,将清晰地看到构建多页面应用是多么简单。我们将设计一个通用布局,中间留出空白区域,通过一条简单的规则,根据 URL 来决定显示哪些内容。

我们之前构建的所有功能主要基于指标。我们为这些指标创建了多个图表,展示它们随时间变化以及在不同国家之间的差异。用户可能还希望查看以国家为中心的报告。因此,我们将为每个国家创建一个独立页面,用户可以在其中查看感兴趣国家的任意指标,并可选地与其他国家进行对比。仅需少量简单修改,我们的应用就能新增 169 个页面。

本节将涵盖以下主题:

  • 了解 Location 和 Link 组件的使用方法。
  • 提取并使用 URL 的属性。
  • 解析 URL 并利用其组成部分来动态修改应用的部分内容。
  • 重构应用结构以支持多种布局。
  • 向应用中添加动态生成的 URL。
  • 将新的 URL 交互功能集成到应用中。

使用柱状图和下拉菜单进行交互式数值比较

Location 和 Link 组件(concept)