es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue-Router obtiene las props de la función del enrutador.

20 Jul, 2023 Programación

Tengo una ruta de la siguiente manera:

{
    path: '/tabs',
    name: 'Tabs',
    component: Tabs,
    children: [
        {
            path: 'test/:id',
            name: 'Test-View',
            component: () => import('@/views/subviews/Test.vue'),
            props: (route) => ({ id: route.params.id, label: 'Etiqueta de la Ruta' })
        },
        {
            path: 'test-two/:id',
            name: 'Test-View-Two',
            component: TestTwo,
            props: { label: 'Test12' }
        }
    ]
},

Y un componente Tabs que construye una vista de pestañas a partir de las rutas secundarias:

<template>
    <div class="router-tabs">
        <div class="tabs">
            <router-link v-for="(route, index) in childRoutes" :key="index" class="tab" :to="route">
                <span v-if="route.props != undefined && route.props.label">{{ route.props.label }}</span>
                <span v-if="route.props == undefined || !route.props.label">Sin Etiqueta</span>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class RouterTabs extends Vue {
    public get childRoutes() {
        const childRoutes = this.$router.options.routes?.find((route) => route.name === this.$route.name || route.children?.find((child) => child.name === this.$route.name))?.children;
        return childRoutes;
    }
}
</script>

Como se indica en la primera ruta secundaria, la propiedad Props es una función.
¿Cómo puedo obtener la Prop label en mi componente Tabs?

Actualmente, la etiqueta de la primera pestaña/ruta siempre es undefined o se produce un error.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener la propiedad label en el componente Tabs, puedes modificar la función getter childRoutes para verificar si la propiedad props de la ruta secundaria es una función. Si lo es, puedes llamar a la función con un objeto vacío y obtener la propiedad label del objeto devuelto.

    Aquí tienes una forma de modificar la función getter childRoutes:

    public get childRoutes() {
  const childRoutes = this.$router.options.routes?.find((route) => route.name === this.$route.name || route.children?.find((child) => child.name === this.$route.name))?.children;
  return childRoutes?.map((route) => {
    // Si la propiedad props es una función, llámala con un objeto vacío y obtén la propiedad label
    if (typeof route.props === 'function') {
      const propsObj = route.props({});
      return {
        ...route,
        props: {
          ...propsObj,
          label: propsObj.label || 'Sin etiqueta', // establece un valor predeterminado para la etiqueta si no está definida
        },
      };
    }
    return route;
  });
}

    Con esta modificación, si la propiedad props de la primera ruta secundaria es una función, la propiedad label se obtendrá y se mostrará correctamente en la primera pestaña. Si la etiqueta no está definida, se utilizará un valor predeterminado de 'Sin etiqueta' en su lugar.

Comments are closed.