對於AEM中的單頁應用程式,應用程式負責路由。 本文檔介紹路由選擇機制、合同和可用選項。
SPA編輯器是建議的解決方案,適用於需要以SPA架構為基礎的用戶端轉換(例如React或Angular)的專案。
應用程式擁有路由,然後由專案前端開發人員實作。 本檔案說明AEM伺服器傳回之模型專屬的路由。 頁面模型資料結構會公開基礎資源的URL。 前端項目可以使用任何提供路由功能的自定義或第三方庫。 一旦路由需要模型的片段,就可以調用PageModelManager.getData()
函式。 當模型路由變更時,必須觸發事件以警告監聽程式庫,例如頁面編輯器。
有關詳細說明,請參閱SPA Blueprint文檔的PageModelManager部分。
ModelRouter
—— 啟用時——封裝HTML5歷史API函式pushState
和replaceState
,以保證預取和存取給定的模型片段。 然後,它通知已註冊的前端元件模型已修改。
ModelRouter
會自動擷取模型片段。 但是,如同任何自動化工具一樣,它都有其局限性。 如果需要,可禁用ModelRouter
或將<a0/>配置為使用元屬性忽略路徑(請參閱SPA頁元件文檔的元屬性部分)。 然後,前端開發人員可以通過請求PageModelManager
使用getData()
函式載入任何給定的模型片段來實現自己的模型路由層。
目前,We.Retail Journal Sample React項目說明了自動化方法,而Angular項目說明了手動方法。 半自動化方法也是有效的使用案例。
目前版本的ModelRouter
僅支援使用指向Sling Model入口點實際資源路徑的URL。 它不支援使用虛名URL或別名。
目前的實作是以SPA專案使用HTML5歷史API來路由至不同應用程式頁面的假設為基礎。
ModelRouter
支援模型路由的概念,因為它監聽pushState
和replaceState
對預回遷模型片段的調用。 在內部,它會觸發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)(.*)"/>