roteamento do modelo SPA

Para aplicativos de página única em AEM, o aplicativo é responsável pelo roteamento. Este documento descreve o mecanismo do roteamento, o contrato e as opções disponíveis.

OBSERVAÇÃO

O recurso Editor de aplicativo de página única (SPA) requer AEM 6.4 service pack 2 ou mais recente.

O Editor de SPA é a solução recomendada para projetos que exigem renderização do cliente baseada em SPA estrutura (por exemplo, Reagir ou Angular).

Roteamento do projeto

O aplicativo é proprietário do roteamento e é implementado pelos desenvolvedores front-end do projeto. Este documento descreve o roteamento específico para o modelo retornado pelo servidor AEM. A estrutura de dados do modelo de página expõe o URL do recurso subjacente. O projeto front-end pode usar qualquer biblioteca personalizada ou de terceiros que ofereça funcionalidades de roteamento. Quando uma rota espera um fragmento de modelo, uma chamada para a função PageModelManager.getData() pode ser feita. Quando uma rota de modelo é alterada, um evento deve ser acionado para avisar bibliotecas de escuta, como o Editor de páginas.

Arquitetura

Para obter uma descrição detalhada, consulte a seção PageModelManager do documento Blueprint SPA.

ModelRouter

O ModelRouter - quando ativado - encapsula as funções da API do histórico HTML5 pushState e replaceState para garantir que um determinado fragmento de modelo seja obtido previamente e acessível. Em seguida, notifica o componente de front-end registrado de que o modelo foi modificado.

Roteamento de Modelo Manual vs Automático

O ModelRouter automatiza a busca de fragmentos do modelo. Mas como qualquer ferramenta automática, ela traz limitações. Quando necessário, ModelRouter pode ser desabilitado ou configurado para ignorar caminhos usando metapropriedades (consulte a seção Metopropriedades do documento SPA Componente de página). Os desenvolvedores front-end podem implementar sua própria camada de roteamento de modelo, solicitando que PageModelManager carregue qualquer fragmento específico do modelo usando a função getData().

OBSERVAÇÃO

Atualmente, o projeto React da amostra de Journal We.Retail ilustra a abordagem automatizada, enquanto o projeto Angular ilustra a abordagem manual. Uma abordagem semiautomatizada seria também um caso de utilização válido.

CUIDADO

A versão atual do ModelRouter suporta apenas o uso de URLs que apontam para o caminho de recurso real dos pontos de entrada do Modelo Sling. Ele não suporta o uso de URLs ou aliases personalizados.

Contrato de roteamento

A implementação atual baseia-se na premissa de que o projeto SPA usa a API do histórico HTML5 para roteamento para as diferentes páginas do aplicativo.

Configuração

O ModelRouter oferece suporte ao conceito de roteamento de modelo, pois ele escuta as chamadas pushState e replaceState para realizar a busca prévia de fragmentos de modelo. Internamente, aciona PageModelManager para carregar o modelo que corresponde a um determinado URL e aciona um evento cq-pagemodel-route-changed que outros módulos podem ouvir.

Por padrão, esse comportamento é ativado automaticamente. Para desativá-la, o SPA deve renderizar a seguinte propriedade meta:

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

Observe que cada rota do SPA deve corresponder a um recurso acessível no AEM (por exemplo, " /content/mysite/mypage"), já que PageModelManager tentará carregar automaticamente o modelo de página correspondente depois que a rota for selecionada. Embora, se necessário, o SPA também possa definir uma “lista de bloqueios” de rotas que devem ser ignoradas pelo PageModelManager:

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

Nesta página