Página/Ruta anidada
En ofa.js, las páginas anidadas (también conocidas como rutas anidadas) son una función poderosa que te permite crear estructuras de páginas con relaciones jerárquicas de padre e hijo. La página padre actúa como un contenedor de diseño, renderizando el contenido de la página hija a través del slot <slot>.
Conceptos básicos
- Página padre (Layout)：página que actúa como contenedor de diseño, que incluye elementos de interfaz de usuario comunes como la barra de navegación, la barra lateral, etc.
- Página hija：contenido específico de la página de negocio, que se renderizará en la posición del slot
<slot>de la página padre
Escritura de la página padre
La página padre necesita usar la etiqueta <slot></slot> para reservar una posición de renderizado para la página hija.
<!-- layout.html -->
<template page>
<style>
:host {
display: block;
height: 100%;
}
...
</style>
...
<div class="content">
<slot></slot>
</div>
...
</template>Escritura de subpáginas
Las subpáginas especifican la ruta de la página padre exportando la propiedad parent.
<template page>
<style>
:host {
display: block;
border: 1px solid red;
padding: 10px;
}
</style>
<p>{{val}}</p>
<script>
export const parent = 'layout.html'; // ⚠️ Código clave
export default async () => {
return {
data: {
val: "Hello ofa.js Demo Code",
},
};
};
</script>
</template>Ejemplo de página anidada
A continuación se muestra un ejemplo completo de enrutamiento anidado, que incluye un layout raíz, una página padre y una página hija:
// Dirección de la página de inicio
export const home = "./sub-page01.html";
// Configuración de animación de cambio de página
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
Soy la subpágina 1
Ruta actual: {{src}}
Ir a la página 2
Soy la subpágina 2
Ruta actual: {{src}}
Ir a la página 1
Escucha de rutas de la página principal
La página padre puede escuchar los cambios de ruta mediante el gancho del ciclo de vida routerChange, lo cual es útil cuando necesitas actualizar el estado de navegación según la ruta actual.
<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>Notas importantes
- El valor del atributo
parentpuede ser una ruta relativa (como./layout.html) o una ruta absoluta (como/pages/layout.html) - La página padre debe contener la etiqueta
<slot></slot>, de lo contrario, el contenido de la página hija no se mostrará - Los estilos de la página padre se heredarán en la página hija, y la página hija también puede definir sus propios estilos
- Usar el hook
routerChangepermite escuchar los cambios de ruta, logrando funcionalidades como resaltar la navegación
Anidamiento multinivel
La página padre también puede tener su propia página padre, formando una estructura de anidamiento multinivel.
<!-- Subpágina -->
<template page>
<p>Contenido de la subpágina</p>
<script>
export const parent = './parent.html';
export default () => {
return { data: {} };
};
</script>
</template><!-- Página padre -->
<template page>
<div class="layout">
<nav>Barra de navegación</nav>
<slot></slot>
</div>
<script>
export const parent = './root-layout.html';
export default () => {
return { data: {} };
};
</script>
</template>Ejemplo de anidamiento de múltiples niveles
// Dirección de la página de inicio
export const home = "./sub-page01.html";
// Configuración de animación de cambio de página
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
Soy la subpágina 1
Ruta actual: {{src}}
Ir a la página 2
Soy la subpágina 2
Ruta actual: {{src}}
Ir a la página 1