Routing und Navigation
Die Seitennavigation innerhalb der App ist die Kernfunktion einer Single-Page-Anwendung. In diesem Kapitel wird erläutert, wie man programmatische Navigation verwendet, den Routenverlauf verwaltet und auf Routenänderungen lauscht.
allowForward - Vorwärtsfunktion
Standardmäßig unterstützt die App nur die Rückwärtsnavigation. Wenn Sie in app-config.js allowForward auf true setzen, können Sie die Vorwärtsfunktion der App aktivieren.
// app-config.js
export const allowForward = true;Nach der Aktivierung:
- Benutzer können die Vor- und Zurück-Schaltflächen des Browsers zur Navigation verwenden
- Die
forward()-Methode der Anwendung funktioniert einwandfrei
Programmatische Navigation
Neben Links, die das olink-Attribut verwenden, können Navigationsmethoden auch in JavaScript aufgerufen werden.
Wichtiger Hinweis:
- Die Methoden
goto,replaceundbacksind sowohl auf der Seiteninstanz (page) als auch auf der App-Instanz (app) verfügbar.- Die Methode
forwardist nur auf der App-Instanz (app) verfügbar.- Verwendung in einer Seite:
this.goto()oderthis.app.goto()- Verwendung in einer Komponente:
this.app.goto()(Aufruf über die App-Instanz erforderlich)Hinweise zur Pfadrelativität:
- Bei Verwendung von
gotooderreplaceauf einem Seitenmodul ist der Pfad relativ zur Adresse des aktuellen Seitenmoduls.- Bei Verwendung von
gotooderreplaceauf der App-Instanz (app) ist der Pfad relativ zur aktuellen App-Navigation.
goto - Seite wechseln
Zur angegebenen Seite navigieren und zum Verlauf hinzufügen:
// Zur angegebenen Seite springen
this.goto("./about.html");
// Mit Parameter springen
this.goto("./detail.html?id=123");replace - Seite ersetzen
Aktuelle Seite ersetzen, nicht zum Verlauf hinzufügen:
// Aktuelle Seite ersetzen
this.replace("./login.html");Wird häufig nach dem Login für die Weiterleitung verwendet, um zu verhindern, dass der Benutzer durch Klicken auf die Zurück-Taste zur Login-Seite zurückkehrt.
back - zurück
Zurück zur vorherigen Seite:
this.back();forward - Vorwärts
Zur nächsten Seite gehen (muss allowForward: true gesetzt werden):
// Auf Seite oder Komponente aufrufen
this.app.forward();Hinweis: Die
forward-Methode muss auf der Anwendungsinstanz (app) aufgerufen werden, nicht auf der Seiteninstanz. Verwenden Sie z.B.this.app.forward()anstelle vonthis.forward().
Vergleich der Navigationsmethoden
| Methode | Verlauf | Verwendungsszenario |
|---|---|---|
goto |
Neuer Eintrag | Normales Seiten-Navigieren |
replace |
Aktuellen Eintrag ersetzen | Navigation nach Login, Weiterleitung |
back |
Zum vorherigen Eintrag zurück | Zurück-Operation |
forward |
Zum nächsten Eintrag vorwärts | Vorwärts-Operation (bei Aktivierung) |
Routing-Verlauf abrufen
Abrufen aller Routing-Verläufe über die routers-Eigenschaft:
const history = app.routers;
// Rückgabeformat: [{ src: "./page1.html" }, { src: "./page2.html" }, ...]Aktuelle Seite abrufen
Über die Eigenschaft current die aktuelle Seiteninstanz abrufen:
const currentPage = app.current;
console.log("Aktuelle Seite:", currentPage.src);Routing-Verlaufsbeispiel
export const proto = {
get canGoBack() {
return this.routers && this.routers.length > 1;
},
get canGoForward() {
// Muss zusammen mit allowForward verwendet werden
return this.routers && this.currentIndex < this.routers.length - 1;
},
get currentPath() {
return this.current?.src || "";
},
};Überwachung von Routenänderungen
Durch das Abhören des router-change Ereignisses auf Routenänderungen reagieren.
Grundlegende Verwendung
app.on("router-change", (e) => {
const { data } = e;
console.log("Routing-Änderung:", data.name);
console.log("Seitenadresse:", data.src);
});Ereignisdaten
router-changeEreignis-Datenobjekt enthält：
| Attribut | Beschreibung | Mögliche Werte |
|---|---|---|
name |
Navigationstyp | goto, replace, forward, back |
src |
Zielseitenadresse | Seitenpfad |
export const ready = function () {
// Überwacht Routenänderungen
this.on("router-change", (e) => {
const { name, src } = e.data;
// Seitenzugriff protokollieren
console.log(`[${name}] Navigiere zu: ${src}`);
// Seitentitel aktualisieren
this.updateTitle(src);
// Statistikdaten senden
this.trackPageView(src);
});
};
export const proto = {
updateTitle(src) {
const titles = {
"home.html": "Startseite",
"about.html": "Über uns",
"contact.html": "Kontakt",
};
const pageName = src.split("/").pop();
document.title = titles[pageName] || "Anwendung";
},
trackPageView(src) {
// Seitenzugriffsstatistik senden
console.log("Seitenzugriffsstatistik:", src);
},
};Seiten-Navigationswächter
Durch die Kombination mit der Routenüberwachung kann eine Navigationsschutzfunktion implementiert werden:
export const ready = function () {
this.on("router-change", (e) => {
const { src } = e.data;
// Prüfen, ob eine Anmeldung erforderlich ist
if (this.requiresAuth(src) && !this.isLoggedIn()) {
e.preventDefault();
this.goto("./login.html");
}
});
};
export const proto = {
requiresAuth(src) {
const authPages = ["profile.html", "settings.html"];
return authPages.some((page) => src.includes(page));
},
isLoggedIn() {
return !!this.globalData?.user;
},
};Vollständiges Beispiel
// Startseite der App
export const home = "./home.html";
export const allowForward = true;
// Konfiguration der Seitenwechselanimation
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
export const ready = function() {
console.log("App initialisiert");
this.on("router-change", (e) => {
console.log("Route geändert:", e.data);
});
};
export const proto = {
get routerCount() {
return this.routers?.length || 0;
},
};
{{val}}
Anzahl der Routen-Verläufe: {{app.routerCount}}
Zu About
About ofa.js
Anzahl der Routen-Verläufe: {{app.routerCount}}
Hinweis: Nach Klick auf "Zurück" kannst du auf der Startseite "Vorwärts" klicken, um hierher zurückzukehren.