Pages/routes imbriqués
Dans ofa.js, les pages imbriquées (également appelées routes imbriquées) sont une fonctionnalité puissante qui vous permet de créer une structure de pages avec une hiérarchie parent-enfant. La page parent sert de conteneur de mise en page et utilise le slot <slot> pour afficher le contenu de la page enfant.
Concepts de base
- Page parent (Layout) : page servant de conteneur de mise en page, contenant les éléments d’interface communs tels que la barre de navigation et la barre latérale
- Page enfant : contenu de la page métier proprement dite, qui sera rendu à l’emplacement du
<slot>de la page parent
Écriture de la page parent
La page parent doit utiliser la balise <slot></slot> pour réserver l'emplacement de rendu à la page enfant.
<!-- layout.html -->
<template page>
<style>
:host {
display: block;
height: 100%;
}
...
</style>
...
<div class="content">
<slot></slot>
</div>
...
</template>Écriture des sous-pages
La sous-page spécifie le chemin de la page parente en exportant la propriété parent.
<template page>
<style>
:host {
display: block;
border: 1px solid red;
padding: 10px;
}
</style>
<p>{{val}}</p>
<script>
export const parent = 'layout.html'; // ⚠️ Code clé
export default async () => {
return {
data: {
val: "Hello ofa.js Code de démonstration",
},
};
};
</script>
</template>Exemple de page imbriquée
Voici un exemple complet de routage imbriqué, comprenant une disposition racine, une page parent et une page enfant :
// Adresse de la page d'accueil de l'application
export const home = "./sub-page01.html";
// Configuration de l'animation de changement de page
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
Je suis la sous-page 1
Route actuelle : {{src}}
Aller à la page 2
Je suis la sous-page 2
Route actuelle : {{src}}
Aller à la page 1
Surveillance du routage de la page parente
La page parente peut écouter les changements de route via le hook de cycle de vie routerChange, ce qui est utile lorsque vous devez mettre à jour l’état de la navigation en fonction de la route actuelle.
<template page>
...
<script>
export default () => {
return {
data: {
active1: false,
active2: false,
},
routerChange() {
this.refreshActive();
},
ready() {
this.refreshActive();
},
proto: {
refreshActive() {
const { current } = this.app;
const path = new URL(current.src).pathname;
this.active1 = path.includes('page1');
this.active2 = path.includes('page2');
},
},
};
};
</script>
</template>Points d'attention
- La valeur de l'attribut
parentpeut être un chemin relatif (par exemple./layout.html) ou un chemin absolu (par exemple/pages/layout.html) - La page parente doit contenir une balise
<slot></slot>, sinon le contenu de la page enfant ne pourra pas s'afficher - Les styles de la page parente sont hérités par la page enfant, et la page enfant peut également définir ses propres styles
- Utiliser le hook
routerChangepermet d'écouter les changements de route et de réaliser des fonctionnalités comme la mise en surbrillance de la navigation
Imbrication multiniveaux
La page parent peut également avoir sa propre page parent, formant une structure d'imbrication à plusieurs niveaux.
<!-- Sous-page -->
<template page>
<p>Contenu de la sous-page</p>
<script>
export const parent = './parent.html';
export default () => {
return { data: {} };
};
</script>
</template><!-- Page parente -->
<template page>
<div class="layout">
<nav>Barre de navigation</nav>
<slot></slot>
</div>
<script>
export const parent = './root-layout.html';
export default () => {
return { data: {} };
};
</script>
</template>Exemple d'imbrication multi-niveaux
// Adresse de la page d'accueil de l'application
export const home = "./sub-page01.html";
// Configuration de l'animation de transition de page
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
Root Layout
Je suis la sous-page 1
Route actuelle : {{src}}
Aller à la page 2
Je suis la sous-page 2
Route actuelle : {{src}}
Aller à la page 1