Vue Router - Not all params are being passed

Question

I have this component that is being ca;;ed by the Vue Router. But not all the params are being received by the component. The link is working because the browser URL is being created correctly e.g. http://localhost:8080/dashboard/brands/1/car/1. But the brandId doesn't get received by the component. It stays 0.

This is my link that redirects to the component:

      router-link
        tag="button"
        :to="{ name: 'CarDetail', params: { brandId: brandId, id: car.id } }"
      >
        Link
      </router-link>

Here is the path defined in the router class:

const parseProps = r => ({ id: parseInt(r.params.id) });

  {
    path: "/dashboard/brands/:brandId/car/:id",
    name: "CarDetail",
    props: parseProps,
    component: () =>
      import(/* webpackChunkName: "brands" */ "@/views/CarDetail.vue")
  }

This is the component:

export default {
  name: "CarDetail",
  data() {
    return {
      car: {}
    };
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    brandId: {
      type: Number,
      default: 0
    }
  }
}

I have updated the code. This is just a function to make sure the id's are of type Number. — Stephen

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2020-12-23T10:08:53

You're missing brandId in parseProps :

const parseProps = r => ({ id: parseInt(r.params.id),brandId: parseInt(r.params.brandId)  });

Vue Router - Not all params are being passed

1 Answers