Verschachtelte Seiten/Routen
In ofa.js sind verschachtelte Seiten (auch als verschachtelte Routen bezeichnet) eine leistungsfähige Funktion, die es dir erlaubt, Seitenstrukturen mit Eltern-Kind-Hierarchien zu erstellen. Die Elternseite dient als Layout-Container und rendert den Inhalt der untergeordneten Seite über einen <slot>-Platzhalter.
Grundbegriffe
- Elternseite (Layout): Die Seite, die als Layout-Container dient und gemeinsame UI-Elemente wie Navigationsleiste und Seitenleiste enthält
- Unterseite: Der spezifische Inhalt der Geschäftsseite, der im
<slot>-Bereich der Elternseite gerendert wird
Schreiben der übergeordneten Seite
Die übergeordnete Seite muss das <slot></slot>-Tag verwenden, um einen Renderplatz für die untergeordnete Seite zu reservieren.
<!-- layout.html -->
<template page>
<style>
:host {
display: block;
height: 100%;
}
...
</style>
...
<div class="content">
<slot></slot>
</div>
...
</template>Schreiben von Unterseiten
Untergeordnete Seiten geben den Pfad der übergeordneten Seite an, indem sie die parent-Eigenschaft exportieren.
<template page>
<style>
:host {
display: block;
border: 1px solid red;
padding: 10px;
}
</style>
<p>{{val}}</p>
<script>
export const parent = 'layout.html'; // ⚠️ Schlüsselcode
export default async () => {
return {
data: {
val: "Hallo ofa.js Demo-Code",
},
};
};
</script>
</template>Beispiel für eine verschachtelte Seite
Hier ist ein vollständiges Beispiel für verschachtelte Routen, das das Root-Layout, die übergeordnete Seite und die untergeordnete Seite enthält:
// Startseitenadresse der Anwendung
export const home = "./sub-page01.html";
// Konfiguration für Seitenübergangsanimationen
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
Ich bin Unterseite 1
Aktuelle Route: {{src}}
Zu Seite 2 springen
Ich bin Unterseite 2
Aktuelle Route: {{src}}
Zu Seite 1 springen
Überwachung der Routing-Ereignisse der übergeordneten Seite
Die übergeordnete Seite kann über den Lifecycle-Hook routerChange auf Routenänderungen hören, was sehr nützlich ist, wenn du den Navigationsstatus basierend auf der aktuellen Route aktualisieren musst.
<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>Hinweise
- Der Wert des Attributs
parentkann ein relativer Pfad (z.B../layout.html) oder ein absoluter Pfad (z.B./pages/layout.html) sein. - Die übergeordnete Seite muss das
<slot></slot>-Tag enthalten, da sonst der Inhalt der Unterseite nicht angezeigt werden kann. - Die Styles der übergeordneten Seite werden an die Unterseite vererbt, die Unterseite kann aber auch eigene Styles definieren.
- Mit dem
routerChange-Hook können Router-Änderungen überwacht werden, um Funktionen wie Navigationshervorhebung zu implementieren.
Mehrstufige Verschachtelung
Eine übergeordnete Seite kann auch ihre eigene übergeordnete Seite haben und so eine mehrstufige Verschachtelungsstruktur bilden.
<!-- Unterseite -->
<template page>
<p>Inhalt der Unterseite</p>
<script>
export const parent = './parent.html';
export default () => {
return { data: {} };
};
</script>
</template><!-- Übergeordnete Seite -->
<template page>
<div class="layout">
<nav>Navigationsleiste</nav>
<slot></slot>
</div>
<script>
export const parent = './root-layout.html';
export default () => {
return { data: {} };
};
</script>
</template>Mehrstufige Verschachtelungsbeispiele
// Startseite der Anwendung
export const home = "./sub-page01.html";
// Konfiguration für Seitenwechsel-Animation
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
Ich bin Unterseite 1
Aktuelle Route: {{src}}
Zu Seite 2 springen
Ich bin Unterseite 2
Aktuelle Route: {{src}}
Zu Seite 1 springen