SPA模型路由 spa-model-routing

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員

若為AEM中的單頁應用程式，則由應用程式負責路由。本檔案說明路由機制、合約及可用的選項。

NOTE

對於需要以SPA框架為基礎的使用者端轉譯(例如React或Angular)專案，建議使用SPA編輯器解決方案。

專案路由 project-routing

應用程式擁有路由，並由專案前端開發人員實作。本檔案說明AEM伺服器傳回之模型的特定路由。頁面模型資料結構會公開基礎資源的URL。前端專案可以使用任何提供路由功能的自訂或第三方資料庫。一旦路由預期模型片段，即可呼叫PageModelManager.getData()函式。當模型路由已變更時，必須觸發事件，以警告聆聽程式庫，例如「頁面編輯器」。

架構 architecture

如需詳細說明，請參閱SPA Blueprint檔案的PageModelManager區段。

模型路由器 modelrouter

ModelRouter （啟用時）會封裝HTML5 History API函式pushState和replaceState，以確保預先擷取及存取模型的指定片段。然後通知註冊的前端元件模型已被修改。

手動與自動模型製程 manual-vs-automatic-model-routing

ModelRouter會自動擷取模型的片段。但就像任何自動化工具一樣，它也伴隨著限制。必要時，可以停用ModelRouter，或將其設定為使用中繼屬性略過路徑(請參閱SPA頁面元件檔案的[中繼屬性]區段)。前端開發人員可以透過請求PageModelManager使用getData()函式載入任何指定的模型片段，來實作他們自己的模型路由層。

NOTE

We.Retail Journal範例React專案說明了自動化方法，而Angular專案說明了手動方法。半自動化方法也是有效的使用案例。

CAUTION

目前版本的ModelRouter僅支援使用指向Sling模型進入點實際資源路徑的URL。不支援使用虛名URL或別名。

路由合約 routing-contract

目前實施是根據SPA專案使用HTML5 History API路由傳送到不同應用程式頁面的假設。

設定 configuration

ModelRouter在偵聽pushState和replaceState預先擷取模型片段的呼叫時，支援模型路由的概念。在內部，它會觸發PageModelManager載入對應到指定URL的模型，並引發其他模組可以監聽的cq-pagemodel-route-changed事件。

依預設，此行為會自動啟用。若要停用，SPA應呈現以下中繼屬性：

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

請注意，SPA的每個路由都應該對應至AEM中的可存取資源（例如，" /content/mysite/mypage"），因為一旦選取路由，PageModelManager將自動嘗試載入對應的頁面模型。不過，如有需要，SPA也可以定義應被PageModelManager忽略的路由「封鎖清單」：

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

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2