• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

108
Vistas
Cómo heredar accesorios de la ruta principal con vue-router

Tengo la siguiente configuración de enrutador y me gustaría que la id de la ruta main.parent se convierta en un número entero y luego se pase a los componentes secundarios (propiedades dadas props: true ) para todos los componentes secundarios.

 { path: '/', component: GrandparentComponent, name: 'main', children: [{ path: ':id', component: ParentComponent, name: 'main.parent', props: route => { return { // parse URL id to int id: parseInt(route.params.id, 10) }; }, children: [{ path: 'details', name: 'main.parent.child', component: ChildComponent, props: true, children: [{ ... }] }] }] }

Sin embargo, parece que la función de ruta solo se llama una vez (cuando se evalúa /:id ) y no cuando se evalúa /:id/details . El código relevante en vue-router parece confirmar esto.

 const route = routeToDisplay.value; const matchedRoute = matchedRouteRef.value; const ViewComponent = matchedRoute && matchedRoute.components[props.name]; // we need the value at the time we render because when we unmount, we // navigated to a different location so the value is different const currentName = props.name; if (!ViewComponent) { return normalizeSlot(slots.default, { Component: ViewComponent, route }); } // props from route configuration const routePropsOption = matchedRoute.props[props.name]; const routeProps = routePropsOption ? routePropsOption === true ? route.params : typeof routePropsOption === 'function' ? routePropsOption(route) : routePropsOption : null; ... const component = h(ViewComponent, assign({}, routeProps, attrs, { onVnodeUnmounted, ref: viewRef, })); ...

Me pregunto si alguien trató de resolver el mismo problema y qué solución se le ocurrió. Idealmente, me gustaría evitar duplicar la función de accesorios para cada ruta secundaria.

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

No existe tal función en Vue Router para pasar accesorios a rutas secundarias de esa manera.

En su lugar, podría usar provide / inject para hacer esto de manera efectiva. El padre provide la propiedad id y cualquier descendiente podría inject :

  1. En ParentComponent.vue , use toRefs() en props para obtener una ref reactiva al id prop.
  2. Use provide() para proporcionar esa id a cualquier hijo (incluidas las rutas secundarias).
  3. Aplique una key en <router-view> para asegurarse de que la vista se vuelva a representar en función de la id única.
  4. En ChildComponent.vue , use el accesorio de inyección para inject la id del paso 2.
 // ParentComponent.vue <script> /* Composition API */ import { provide, toRefs } from 'vue' export default { props: ['id'], setup(props) { const { id } = toRefs(props) provide('id', id) }, } /* Options API */ import { toRefs } from 'vue' export default { props: ['id'], provide() { const { id } = toRefs(this.$props) return { id } }, } </script> <template> <router-view :key="id" /> </template>
 // ChildComponent.vue <script> export default { inject: ['id'], } </script> <template> <h2>Detail {{ id }}</h2> </template>

Demostración de la API de composición

Demostración de la API de opciones

almost 3 years ago · Juan Pablo Isaza Denunciar

0

TL; DR Ver demostración de trabajo


No entiendo claramente lo que está preguntando, pero aquí está mi comprensión de sus preguntas:

  1. ¿La función de ruta se llama solo una vez en el componente principal y no en los secundarios?
  2. Cómo no repetir el código de función de accesorios para cada ruta secundaria
  3. Cómo heredar accesorios de los componentes principales

1: No, la función de ruta se llamará en cada ruta secundaria.

2: Resumen del código de función

En lugar de copiar y pegar o repetir el código de la función, puede crear una función y usarla:

 const parseUrlIdtoInt = (route) => ({ id: parseInt(route.params.id, 10) }); // ... { path: '...' props: parseUrlIdtoInt, children: [ { path: '...', props: parseUrlIdtoInt } ] } //...

3: el enrutador Vue transmite accesorios

Si la propiedad props se especifica en la configuración del enrutador, Vue Router pasa automáticamente los accesorios.

- Con la opción props habilitamos pasar props al componente - Con la función props controlamos cómo y qué prop pasar

 // Router configuration { path: '...', name: '...', props: true // or a function 👈 // ... }

Tu solución

Entonces, para acceder a id prop en su ChildComponent , puede definir accesorios y usarlos:

API de composición

 <script setup> defineProps({ id: Number }); </script>

API de opciones

 <script> import { defineComponent } from 'vue'; export default defineComponent({ props: { id: Number, }, }); </script>

Otras soluciones no tan recomendadas 😁

  • Si no desea definir accesorios, puede acceder a la identificación con $attrs.id en la plantilla.
  • O puede usar la función useRoute() de Vue Router y acceder a los parámetros:
 <script setup> import { useRoute } from 'vue-router' const route = useRoute() </script> <template> {{ route.params.id }} </template>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda