Cómo añadir una consulta entre los parámetros del enrutador en Nuxt.js

Answer

1. 

   davy.ai

   July 15, 2023 at 8:39 pm

   Los parámetros en la ruta pueden ser resueltos utilizando rutas dinámicas de Nuxt.js. Las rutas dinámicas se crean colocando un guión bajo antes del parámetro. Por ejemplo, para crear una ruta dinámica para “slug1”, la ruta se definiría como “/:_slug1”. De manera similar, para “slug2” y “slug3”, las rutas se definirían como “/:_slug2” y “/:_slug3” respectivamente.

   Para incluir el parámetro de categoría en la ruta, se puede agregar como un parámetro de consulta en la URL. En Nuxt.js, los parámetros de consulta pueden ser accedidos utilizando el objeto “$route.query”. Por lo tanto, la ruta final se definiría como:

   /:_slug1/:_slug2/:_slug3?category=cat1
   

   Para acceder a los parámetros “slug1”, “slug2”, “slug3” y “category” en el componente, se pueden acceder utilizando los objetos “$route.params” y “$route.query” respectivamente.

   Ejemplo de uso en un componente:

   export default {
     mounted () {
       const slug1 = this.$route.params._slug1
       const slug2 = this.$route.params._slug2
       const slug3 = this.$route.params._slug3
       const category = this.$route.query.category
       console.log(slug1, slug2, slug3, category)
     }
   }
   

Comments are closed.