5

tengo un problema con unas rutas dinámicas en Nuxt. Estoy tratando de crear un blog con Nuxt 2, todas las páginas funcionan correctamente menos las entradas individuales. Me explico, tengo un carpeta pages donde dentro hay una carpeta llamada terapias que tiene dos archivos, index.vue y _id.vue. El index muestra unas tarjetas con todas las entradas, en el segundo archivo está el componente que te muestra una entrada individual. Los datos los recojo de un archivo js llamado portfoli.js y se recogen correctamente, al menos la primera vez que se accede a una entrada están todos los datos. portfoli.js esta compuesto por un objeto con distintos objetos y arrays dentro.

Este es el archivo index.vue, Traigo los datos y los pinto. Aquí parece que funciona todo correctamente.

<template>
  <div v-if="terapiasBlog">
    <div class="cont-terapias">
      <v-row id="inici-terapias">
        <v-col cols="12">
          <h1 class="titleBlog">Terapias</h1>
        </v-col>
      </v-row>
      <v-row class="fila-blog">
        <v-col
          xs="12"
          sm="6"
          md="4"
          v-for="(entry, index) in terapiasBlog"
          :key="index"
        >
          <div class="entry-container">
            <div class="img-entradas">
              <nuxt-link :to="'/terapias/' + entry.id" class="entry-link" target="_blank">
                <v-img :src="entry.imagen" class="entry-image" :alt="entry.alt"></v-img>
              </nuxt-link>
            </div>
            <div class="entry-details">
              <nuxt-link :to="'/terapias/' + entry.id" class="entry-link" target="_blank">
                <h2 class="entry-title">{{ entry.titol }}</h2>
              </nuxt-link>
              <p class="entry-text">{{ formatText(entry.text) }}</p>
              <nuxt-link :to="'/terapias/' + entry.id" class="entry-link" target="_blank">
                <div class="container-btn">
                  <v-btn class="entry-button"> Leer más </v-btn>
                </div>
              </nuxt-link>
            </div>
          </div>
        </v-col>
      </v-row>
    </div>
    <div class="cont-icono">
      <a href="#inici-terapias">
        <v-icon class="icono">{{ icono }}</v-icon>
      </a>
    </div>
  </div>
</template>

<script>
import portfoli from "@/dades/portfoli";

export default {
  mounted() {
    var self=this;
    self.portfoliVue = portfoli;
    self.icono = self.portfoliVue.inici.icono;
    self.serveis = self.portfoliVue.index.llista;
    self.serveis.forEach((serveiBlog) => {
      if (serveiBlog.id === "terapias") {
        self.terapiasBlog = serveiBlog.projectes;
      }
    });
  },
  data() {
    return {
      serveis: false,
      terapiasBlog: false,
      icono: false,
    };
  },
  methods: {
    formatText(text, lines = 5) {
      const words = text.split(" ");
      const maxWords = lines * 10;
      let truncatedText = words.slice(0, maxWords).join(" ");
      if (words.length > maxWords) {
        truncatedText =
          truncatedText.slice(0, truncatedText.lastIndexOf(" ")) + "...";
      }
      return truncatedText
        .replace(/-\s/g, "") // remove hyphens at end of line
        .replace(/\s\s+/g, " "); // remove extra spaces
    },
  },
};
</script>

Lo que hay dentro del methods es para limitar líneas de texto y hacer saltos de línea, mounted son las acciones que se realizan al montar el componente, data son los datos que se envían al template para poder usarlos.

Este es el archivo _id.vue. Este me funciona correctamente cuando es la primera entrada a la que accedo, al intentar acceder a otra entrada solo me carga el texto, si intento entrar a una tercera entrada se me cuelga la pagina y no carga nunca.

<template>
  <div v-if="informacionCargada" class="cont-terapias-blog">
    <v-row>
      <v-col>
        <h1>{{ blog.titol }}</h1>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <div class="cont-imagen-proyecto">
          <v-img
          :src="require('@/static/' + imageBloger)"
            class="imagen-proyecto"
            :alt="alt"
          >
          </v-img>
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <div class="text-individual">
        {{ individual }}
        </div>
      </v-col>
    </v-row>
  </div>
</template>
<script>
import portfoli from "@/dades/portfoli";

export default {
  mounted() {
    var self=this;
    self.portfoliVue = portfoli;
    let identificador = self.$route.params.id;

    self.portfoliVue.index.llista.forEach((categoria) => {
      categoria.projectes.forEach((terapia) => {
        if (terapia.id === identificador) {
          self.blog = terapia;
          self.alt= self.blog.alt;
          self.imageBloger = self.blog.imagen;
          self.individual= self.blog.individual;
        }
      });
    });

    // Establecer la variable en true cuando se completa la carga de información
    self.informacionCargada = true;
  },
  data() {
    return {
      blog: {},
      imageBloger:false,
      informacionCargada: false, // Inicializar la variable en false
      alt:false,
      individual:false,
    };
  },
};
</script>

No entiendo porque se carga bien con todos los datos la primera vez que accedo y luego ya no realiza la carga correctamente. Este es objeto que se encuentra en portfoli.js

export default {
index:{
    llista: [
      {
        titol:'Terapias.',
        enlace:'/terapias',
        id:'terapias',
        projectes:[
          {
            titol:'Reiki',
            text:'El reiki es una técnica de sanacion  natural que se basa en la transferencia de energía a través de las manos. Se utiliza para equilibrar el flujo energético del cuerpo, lo que puede ayudar a mejorar la salud física, mental y emocional.',
            enlace:"/terapias/terapias-reiki",
            id:"terapias-reiki",
            imagen:'reiki.jpg',
            alt:"Imagen reiki",
            individual:"El Reiki es una técnica de sanación energética que utiliza la canalización de la energía universal para equilibrar el cuerpo, la mente y el espíritu. Esta técnica se basa en la creencia de que el cuerpo humano tiene una capacidad innata para sanarse a sí mismo y que la energía universal puede ser utilizada para activar y fortalecer este proceso.\n"+"Durante una sesión de Reiki, el practicante coloca sus manos sobre el cuerpo del receptor, en diferentes posiciones, con el objetivo de canalizar la energía y equilibrar los centros de energía del cuerpo, conocidos como chakras. El receptor puede sentir sensaciones de calor, frío, cosquilleo o relajación profunda durante la sesión.\n"+"El Reiki se puede utilizar para tratar una amplia variedad de dolencias físicas y emocionales, desde dolores de cabeza y problemas digestivos hasta ansiedad y depresión. Además, el Reiki puede ser utilizado para reducir el estrés, mejorar la calidad del sueño y aumentar la sensación de bienestar en general.\n"+"El Reiki es una técnica no invasiva, segura y suave que se puede utilizar en conjunto con otros tratamientos médicos y terapias complementarias. Cualquier persona puede aprender a practicar Reiki y no se requieren habilidades previas.\n"+"En resumen, el Reiki es una técnica de sanación energética que utiliza la energía universal para equilibrar el cuerpo, la mente y el espíritu. Es una técnica segura y no invasiva que se puede utilizar para tratar una amplia variedad de dolencias físicas y emocionales y puede mejorar la calidad de vida en general.",
          },
          {
            titol:'Psicoterapia de UCDM',
            text:'La Psicoterapia de UCDM es un viaje hacia nuestro interior para encontrar la causa de un conflicto que estamos viviendo, donde a través del perdón y la expiación somos capaces de liberar el miedo y la culpa inicial, cambiando la percepción de los efectos en todos los niveles y reconociendo nuestra inocencia, con el propósito de encontrar la paz.',
            enlace:'/terapias/terapias-ucdm',
            id:"terapias-ucdm",
            imagen:'ucdm.jpg',
            alt:"Imagen terapia UCDM",
            individual:"La terapia de UCDM, o Un Curso de Milagros, es un enfoque terapéutico que se basa en la enseñanza espiritual del libro del mismo nombre. Esta terapia se centra en la idea de que los pensamientos son la base de nuestras percepciones y experiencias, y que podemos cambiar nuestros pensamientos para cambiar nuestra vida.\n"+"Durante una sesión de terapia de UCDM, el terapeuta trabajará con el paciente para identificar los patrones de pensamiento negativos y limitantes que pueden estar causando problemas emocionales y físicos en su vida. A través de una combinación de diálogo y meditación, el terapeuta ayudará al paciente a cuestionar sus pensamientos y a encontrar nuevas formas de percibir y relacionarse con el mundo.\n"+"La terapia de UCDM puede ayudar a reducir la ansiedad, el estrés, la depresión y otros problemas emocionales, así como a mejorar las relaciones interpersonales y la calidad de vida en general. También puede ser útil para aquellos que buscan un enfoque más espiritual para su bienestar emocional y físico.\n"+"Es importante tener en cuenta que la terapia de UCDM no es una solución rápida o una cura milagrosa para los problemas emocionales y físicos, sino que es un proceso de desarrollo personal y espiritual que requiere tiempo y compromiso. Sin embargo, muchos pacientes han encontrado la terapia de UCDM transformadora y han experimentado cambios positivos duraderos en su vida.",
          },
]}]}}

Es más largo, pero creo que estos son los datos necesarios. Espero puedan ayudarme, gracias. He descubierto que el problema se da cuando hay dos pestañas abiertas de entradas, si solo abro una pestaña se carga bien, el problema es al intentar abrir otra entrada en una pestaña nueva, habiendo ya una pestaña abierta de otra entrada distinta.

1 respuesta 1

1
+50

Logré replicar el problema. Parece ser que está completamente relacionado con Webpack, ya que no logré replicarlo con Nuxt 3 que usa Vite. Hay un limite de conexiones que se puede hacer desde un navegador al sitio en dev, me parece que el limite son 2, en los siguientes intentos se quedará cargando infinitamente.

Puedes verificarlo entrando a tu sitio desde varias pestañas, luego entra desde modo incognito o desde otro navegador y verás que desde aquí no hubo ningun problema para cargar.

Es un problema que está presente de hace años, estuve viendo en github y oficialmente no hay una solución, solo dijeron que en la version 3 de nuxt no está presente.

Por el momento para trabajar en local podrías quitarle los target="_blank" a tus nuxt-link para que no termines con mas de 2 pestañas abiertas.

4
  • Si, le quite los target a la aplicación, pero si un cliente quiere abrir varias pestañas le dará el error y quedará un poco feo por mi parte. Estaba pensando en llevar el proyecto a nuxt 3, pero tambien tengo curiosidad de saber si hay alguna solucion para este problema. También tengo la duda de si este error solo se da en desarrollo o también se da en producción. Gracias por tu tiempo y tus consejos. Si nadie da una solución daré tu respuesta como correcta.
    – jbort
    Commented el 18 abr. 2023 a las 8:45
  • Ocurre solo durante el desarrollo, por eso creo que es un problema de webpack Commented el 18 abr. 2023 a las 9:29
  • Puedes probarlo con: npm run generate para empaquetar el proyecto y luego: npm run start para testear el producto final Commented el 18 abr. 2023 a las 9:37
  • Hola, lo subi a producción y me sigue fallando, pero ahora ya directamente a la primera pestaña nueva que abro, me da un error 404. Se te ocurre algo? Gracias
    – jbort
    Commented el 6 may. 2023 a las 8:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.