How to pass props through router link in VUE.JS?

Question

I hope you are having a great day. Actually, I'm curious whether we can pass props through the router link in vue. js or not?

Scenario Suppose i have two components. (a) Shop Now (Parent Component) which contains array of products as follow:

<script>
export default {
    data()
    {
    return{
            Products:[
                {id:1,name:'Shirts',Detail:'Lorem'},
                {id:2,name:'Shoes',Detail:'Lorem'},
                {id:3,name:'Bags',Detail:'Lorem'},
                {id:4,name:'Glasses',Detail:'Lorem'},
                
            ]
        }
    }
}
</script>

Now, whenever a user click on one of the products the data of particular product should be displayed on "Product Details Component".

This is how the product will be displayed to user:

   <div class="product-card" v-for="Product in Products" :key="Product.id">
                <router-link :to="{name:'ProductDetail',params:{id:Product.id} }">
                    <h5>
                        {{Product.name}}
                    </h5>
                </router-link>
               
            </div>

I'm successfully getting the ID of the product but I want to pass the other data suppose detail as well that should be visible to "Product Details Component"

Any lead would be highly appreciated. Thanks :)