Vue router dynamic props

Question

I have a problem with my Vue router js file. The problem is that I need to send to a route, more than one component and multiple dynamic props.

If I send 1 component with dynamic props, it don't crash. If I send more components with static props, it don't crash. The problem is when I try to send more components with dynamic props to the same route.

{
    path: RoutesName.RECEPTION_MULTIPLE_INVENTORY_PROCESS.RECEPTION_MULTIPLE_INVENTORY_PROCESS_PATH, // /reception/go/:id
    name: RoutesName.RECEPTION_MULTIPLE_INVENTORY_PROCESS.RECEPTION_MULTIPLE_INVENTORY_PROCESS_NAME,
    components: {
        default: RecepcionMultipleInventoryProcess,
        menu: MenuInventoryMultiple
    },
    props: (route) => ({
        default: {
          selectedReceptionIds: route.params.selectedReceptionIds,
          location: route.params.location
        },
        menu: {
          title: 'Recepciones multiples',
          titleActi: 'Entradas multiples'
        }
    })
}

Here the snippet with multiple components and dynamic (default component) props

Lana Lana · Accepted Answer · 2020-01-23T16:23:39

You use the combination of Function mode and Object mode in the wrong way. Rewrite props like this:

props: { 
  default: (route) => ({
    selectedReceptionIds: route.params.selectedReceptionIds, 
    location: route.params.location 
    }),
  menu: {
    title: 'Recepciones multiples',
    titleActi: 'Entradas multiples'
  } 
}

Vue router dynamic props

1 Answers