🐛 problema de regresar al inicio vacío

components/Cargador.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="contenedor-cargador">
+  <div class="contenedor-cargador">
     <div class="cargador">
       <Logo class="logo" />
       <div class="texto-cargador">

components/Galeria/Mosaico.vue

@@ -27,7 +27,7 @@ onMounted(() => {
 
 <template>
   <div class="contenedorGaleria">
-    <div v-for="obra in obras" :key="obra.registro" class="obra">
+    <div v-for="obra in obras" :key="`obra-registro-${obra.registro}`" class="obra">
       <span class="registro">{{ obra.registro }}</span>
 
       <NuxtLink :to="`/obras/${obra.registro}`">

components/Galeria/index.vue

@@ -195,5 +195,5 @@ function cargarPagina(pagina: number) {
   <GaleriaInformacion v-if="datos" :coleccion="coleccion" :datos="datos" />
 
   <Cargador v-if="pending" />
-  <GaleriaMosaico v-else :obras="obras" :pagina="paginaActual" :cargarPagina="cargarPagina" :cargando="cargando" />
+  <GaleriaMosaico :obras="obras" :pagina="paginaActual" :cargarPagina="cargarPagina" :cargando="cargando" />
 </template>

components/PaginaGeneral.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-import type { Pagina } from '~/tipos';
+import type { Imagen, Pagina } from '~/tipos';
 import { gql } from '~/utilidades/ayudas';
 
 interface Props {
   slug: string;
 }
+
+interface DatosPagina {
+  titulo: string;
+  descripcion: string;
+  contenido: string;
+  banner: Imagen;
+}
+
+interface Esquema {
+  paginas: DatosPagina[];
+}
+
 const props = defineProps<Props>();
-const datos: Ref<Pagina | null> = ref(null);
+const datos: Ref<DatosPagina | null> = ref(null);
 
 const Pagina = gql`
 query {
@@ -22,7 +34,7 @@ query {
 }
 `;
 
-const { paginas } = await obtenerDatos(`pagina${props.slug}`, Pagina);
+const { paginas } = await obtenerDatos<Esquema>(`pagina${props.slug}`, Pagina);
 
 if (paginas.length) {
   datos.value = paginas[0];

components/Vista/Abecedario.vue

@@ -55,10 +55,10 @@ function procesarDatos() {
 </script>
 
 <template>
-  <section v-for="seccion in abc" :key="`seccion${seccion.letra}`" class="grupoLetras">
+  <section v-for="seccion in abc" :key="`seccion-letra-${seccion.letra}`" class="grupoLetras">
     <h2 class="tituloLetra">{{ seccion.letra }}</h2>
     <ul class="elementos">
-      <li v-for="(elemento, i) in seccion.elementos" :key="`elemento${i}`" class="elemento">
+      <li v-for="(elemento, i) in seccion.elementos" :key="`elemento-abc-${i}`" class="elemento">
         <NuxtLink :to="elemento.url">{{ elemento.texto }}</NuxtLink>
       </li>
     </ul>

components/Vista/FiltrosUbicaciones.vue

@@ -18,7 +18,7 @@ const opciones: { coleccion: TiposLugares; titulo: string }[] = [
   <ul class="opciones">
     <li
       v-for="opcion in opciones"
-      :key="`opcionUbicacion${opcion.coleccion}`"
+      :key="`opcion-ubicacion${opcion.coleccion}`"
       @click="cambiarDatos(opcion.coleccion)"
       class="opcionUbicacion"
       :class="coleccion === opcion.coleccion ? 'activo' : ''"

components/Vista/FiltrosVistas.vue

@@ -50,7 +50,7 @@ function cambiarVista(llave: Vistas) {
   <div id="filtrosVistas">
     <VistaIconos
       v-for="vista in vistas"
-      :key="vista"
+      :key="`vista-${vista}`"
       class="filtro"
       :class="cerebroArchivo.vistaActual === vista ? 'activo' : ''"
       :vista="vista"

components/Vista/Mapa/Cajon.vue

@@ -36,7 +36,8 @@ watch(data, (respuesta) => {
 <template>
   <div id="cajon" :class="abierto ? 'activo' : ''">
     <Cargador v-if="pending" />
-    <div v-else class="contenido">
+
+    <div class="contenido">
       <div id="cerrar" @click="cerrarCajon">X</div>
       <h3 class="titulo">
         <NuxtLink :to="`/${coleccion}/${coleccion === 'paises' ? datos.slug : datos.id}`">{{ datos.nombre }}</NuxtLink>

components/Vista/index.vue

@@ -184,7 +184,7 @@ async function cambiarDatosUbicacion(tipoLugar: TiposLugares) {
 
   <Cargador v-if="pending || cargando" />
 
-  <div v-else>
+  <div>
     <VistaAbecedario
       v-if="cerebroArchivo.vistaActual === 'abc'"
       :datos="datos as DatosVistas[]"

pages/categorias[[numero]]/index.vue

@@ -189,7 +189,7 @@ function clicSubCategorias(nivel: number, datosCategoria: Categoria) {
 
   <Cargador v-if="pending" />
 
-  <div v-else>
+  <div>
     <!-- Ver documentación del componente <TransitionGroup> en https://vuejs.org/guide/built-ins/transition-group.html -->
     <TransitionGroup name="tarjetas" tag="ul">
       <ul

pages/index.vue

@@ -54,13 +54,14 @@ watch(data, (respuesta) => {
 
 <template>
   <Cargador v-if="pending && !pagina" />
-  <div v-else id="portada" :style="`background-image:url(${imgPortada})`">
+
+  <div id="portada" :style="`background-image:url(${imgPortada})`">
     <Logo class="svgClaro" />
     <h1 class="titulo logo-texto">{{ general.titulo }}</h1>
     <div
       v-if="pagina && pagina.secciones"
       v-for="(seccion, i) in pagina.secciones"
-      :key="`seccion${i}`"
+      :key="`seccion-intro${i}`"
       class="seccion"
     >
       <section v-if="seccion.titulo || seccion.texto">

pages/obras/[registro].vue

@@ -273,7 +273,7 @@ const rutaCampo = (llave: keyof RegistroObra) => {
 <template>
   <Cargador v-if="pending" />
 
-  <div id="contenedorObra" v-else>
+  <div id="contenedorObra">
     <div id="contenedorImagen" :class="vistaCompleta ? 'grande' : ''">
       <div class="opciones">
         <IconoZoom class="controlImg zoom" :vistaCompleta="vistaCompleta" @click="cambiarVistaImagen" />
@@ -316,7 +316,7 @@ const rutaCampo = (llave: keyof RegistroObra) => {
         <div id="registro">{{ obra.registro }}</div>
       </section>
 
-      <template v-for="seccion in cerebroGeneral.campos" :key="`campo${seccion.campo}`">
+      <template v-for="seccion in cerebroGeneral.campos" :key="`campo-ficha-${seccion.campo}`">
         <template v-if="seccion.campo === 'separador'">
           <span class="separador"></span>
         </template>