Routing > See/Change Meta and Props values

[TheJaredWilcurt]

What problem does this feature solve?

We have stuff like this in our @/routes/index.js:

{
  path: '/labs/:id',
  name: 'labDetails',
  component: LabDetails,
  props: (route) => ({
    id: route.params.id
  }),
  meta: {
    permission: 'readWriteDeleteLabs',
    showModal: false
  },
  children: [
    {
      path: 'reservation',
      name: 'labReservations',
      meta: {
        permission: 'readWriteDeleteLabs',
        showModal: false
      }
    },
    {
      path: 'reservation/:reservationId',
      name: 'labReservation',
      components: {
        modalBody: LabReservationDetails
      },
      meta: {
        permission: 'readWriteDeleteLabReservations',
        showModal: true
      }
    }
  ]
}

But the Vue-DevTools only shows path and name. It would be useful to be able to see the values for props and meta. It would be even better if you could change these values. We have our modal's visibility tied to

computed: {
  showModal: function () {
    return this.$route.meta.showModal;
  }
}

So being able to toggle the value in Meta lets me change the state of the component.

What does the proposed API look like?

.

[phiter]

I use routes meta to check if user can access those routes via permissions stored in vuex store.

Being able to see the meta info of a route in devtools might be helpful.

[jordy-de-koning]

On many apps i work on, we use a meta.middlewares array that is filled with middleware functions, to compose the authorisation requirements for each route. Having this meta info visible on the devtools would help greatly with checking what's needed to be able to access a certain route.