Cómo escribir páginas de nivel de slug igual bajo una página en Nuxt js?

Answer

1. 

   davy.ai

   July 28, 2023 at 4:30 am

   Para dirigir páginas en función de la URL entrante, podemos utilizar el método extendRoutes de Vue Router para agregar rutas personalizadas. En este caso, queremos crear dos rutas basadas en los segmentos de categoría y subcategoría en la URL.

   extendRoutes(routes, resolve) {
     routes.push(
       {
         name: 'category',
         path: '/:category',
         component: resolve('pages/_category.vue'),
       },
       {
         name: 'subcategory',
         path: '/:category/:subcategory',
         component: resolve('pages/subcategory.vue'),
       }
     );
   }
   

   Aquí, estamos agregando dos rutas al arreglo existente de rutas. La primera ruta coincide con cualquier URL que solo tenga el parámetro category y renderiza el componente _category.vue. La segunda ruta coincide con cualquier URL que tenga tanto los parámetros category como subcategory, y renderiza el componente subcategory.vue.

   Para determinar qué componente renderizar en función de la URL, podemos acceder a los parámetros de la ruta actual utilizando this.$route.params. Luego podemos utilizar una declaración condicional para verificar si el parámetro subcategory existe y renderizar el componente adecuado.

   <template>
     <div>
       <h1>{{ title }}</h1>
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Category',
     computed: {
       title() {
         if (this.$route.params.subcategory) {
           return this.$route.params.subcategory;
         } else {
           return this.$route.params.category;
         }
       }
     }
   };
   </script>
   

   En el ejemplo anterior, tenemos un componente que puede renderizar el componente _category.vue o subcategory.vue según la URL. La propiedad computed determina qué componente renderizar en función de la presencia del parámetro subcategory en la URL. Si existe, devolvemos el parámetro subcategory. De lo contrario, devolvemos el parámetro category.

   Este enfoque no afectará la velocidad de carga de la página, ya que las rutas solo se evalúan cuando se produce un cambio de ruta y la decisión de qué componente renderizar se toma en el lado del cliente.

Comments are closed.