how to use dynamic routing in vuejs

this is my json object ,i'm trying to access jackets in my url

{
  "_id": "6316f215fd9c107baa1bc160" 
  "type": "Jackets",
}

this is my router component to get product by id

 {
    path: "/product/:id",
  },

if i want to get my product information by id

 <router-link :to="`/product/${product._id}`">
                  <div
                    class="bg-image hover-zoom ripple"
                    data-mdb-ripple-color="light"
                  >
                    <img
                      src="../../assets/pexels-baskin-creative-studios-1766838.jpg"
                      class="card-img-top"
                    />

                  </div>
                </router-link>

this is my url

http://localhost:8082/product/6316f215fd9c107baa1bc160

i get jackets in my template after clicking the router-link

{{product.type}}

how can i get add jackets in my url to something like this


http://localhost:8082/product/jackets

and still display the json details in my template component

Solution

As per my understanding, You want to slightly change the current route path without refreshing/reloading the page. If Yes, You can achieve that by using history.replaceState() API.

history.replaceState({}, '', this.$route.path + '/' + <your product name>)