CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-router
MZH
MZH

Reputation: 1534

Force reload on same route diferent query parameter VueJS

I'm trying to reload the page component when user clicks on from the edit page, the router doesn't reload and the old edit values remain.

{
  path: "/products/new",
  component: ProductPage,
  meta: {
    breadcrumb: [
      { name: "Home", link: "/home" },
      { name: "Products", link: "/products" },
      { name: "New Product" }
    ]
  }
},
{
  path: "/products/:id",
  component: ProductPage,
  meta: {
    breadcrumb: [
      { name: "Home", link: "/home" },
      { name: "Products", link: "/products" },
      { name: "Edit Product" }
    ]
  }
}

is there any way we reload the page component when two pages have same Component?

Upvotes: 2

Views: 2438

Answers (2)

Sudarsan
Sudarsan

Reputation: 107

this.$router.go({path:'/products', params:{id:id}}) doesn't work on Vue version 2 and above. I found a workaround if anyone else is having similar issues. Use

this.$router.push({path:'/products', params:{id:id}}, this.onCompleteReload)

And then have the function onCompleteReload like below:

onCompleteReload () {
if (this.existingData) {  // Some condition to make sure we are reloading from same route with different parameter.
  this.$router.go(0)
}

}

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362700

Use $router.go()...

this.$router.go({path:'/products', params:{id:id}})

Upvotes: 2

Related Questions