Get params of route Shopware 6

Question

I try to extend the product detail page and get the productId out of the routes.

Shopware.Module.register('sw-product-content-element', {
  routeMiddleware(next, currentRoute) {
    if (currentRoute.name === 'sw.product.detail') {
          currentRoute.children.push({
              name: 'sw.product.detail.content-element',
              path: '/sw/product/detail/:id/content-element',
              component: 'sw-product-detail-content-element',
              meta: {
                  parentPath: "sw.product.index"
              },
              props: {
                default(route) {
                  console.log(route)
                  return {
                      productId: route.params.id
                  };
                }
              }
          });
      }
      next(currentRoute);
  }
});

I try to pass my productId as props to my component, but in my component productId is undefined.

Component.register('sw-product-detail-content-element', {
  template,

  props: {
    productId: {
        required: true,
        type: String
    },
  },

  data() {
    return {
      product: null
    };
  },

  created() {
    console.log(this.productId)
  },
....

Answer 1

I found a solution. I do not need to pass my value as props, I can just use this.$route.params.id

Component.register('sw-product-detail-content-element', {
  template,

  props: {
    productId: {
        required: true,
        type: String
    },
  },

  data() {
    return {
      product: null
    };
  },

  created() {
    this.productId = this.$route.params.id
    console.log(this.productId)
  },
....