SPA型号路由

对于AEM中的单页应用程序,应用程序负责路由。 本文档描述了路由机制、合同和可用选项。

注意

单页应用程序(SPA)编辑器功能需要AEM 6.4 service pack 2或更高版本。

SPA编辑器是需要SPA框架的客户端渲染(例如,React或Angular)的项目的推荐解决方案。

项目路由

应用程序拥有路由,然后由项目前端开发人员实施。 此文档描述特定于AEM服务器返回的模型的路由。 页面模型数据结构公开基础资源的URL。 前端项目可以使用提供路由功能的任何自定义或第三方库。 一旦路由需要模型片段,就可以调用PageModelManager.getData()函数。 当模型路由发生更改时,必须触发事件以警告监听库,如页面编辑器。

架构

有关详细说明,请参阅SPA Blueprint文档的PageModelManager部分。

ModelRouter

ModelRouter —— 启用后——封装HTML5历史API函数pushStatereplaceState,以确保预取和访问给定的模型片段。 然后,它会通知已注册的前端组件模型已修改。

手动与自动模型路由

ModelRouter自动获取模型的片段。 但是,作为任何自动化工具集,它都有局限性。 如果需要,可以禁用ModelRouter或将配置为使用元属性忽略路径(请参阅SPA页面组件文档的元属性部分)。 然后,前端开发者可以使用getData()函数请求PageModelManager加载任何给定的模型片段,从而实现自己的模型路由层。

注意

目前,We.Retail日志范例React项目演示了自动化方法,而Angular项目则演示了手动方法。 半自动化方法也是有效的用例。

注意

ModelRouter的当前版本仅支持使用指向Sling Model入口点的实际资源路径的URL。 它不支持使用虚URL或别名。

路由合同

当前实施基于SPA项目使用HTML5 History API路由到不同应用程序页面的假设。

配置

ModelRouter在监听pushStatereplaceState调用预取模型片段时支持模型路由的概念。 在内部,它触发PageModelManager以加载与给定URL对应的模型,并触发其他模块可以侦听的cq-pagemodel-route-changed事件。

默认情况下,此行为会自动启用。 要禁用它,SPA应呈现以下元属性:

<meta property="cq:pagemodel_router" content="disable"\>

请注意,SPA的每条路由都应与AEM中的可访问资源(例如,“ /content/mysite/mypage")对应,因为选择路由后,PageModelManager将自动尝试加载相应的页面模型。 但是,如果需要,SPA还可以定义PageModelManager应忽略的路由的“阻止列表”:

<meta property="cq:pagemodel_route_filters" content="route/not/found,^(.*)(?:exclude/path)(.*)"/>

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now