Question

0

118

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.

over 3 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

0 TL; DR Ver demostración de trabajo

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

¿La función de ruta se llama solo una vez en el componente principal y no en los secundarios?
Cómo no repetir el código de función de accesorios para cada ruta secundaria
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>

over 3 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-11T15:32:49.545Z

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 :

En ParentComponent.vue , use toRefs() en props para obtener una ref reactiva al id prop.
Use provide() para proporcionar esa id a cualquier hijo (incluidas las rutas secundarias).
Aplique una key en <router-view> para asegurarse de que la vista se vuelva a representar en función de la id única.
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

0

118