O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Updating the product details when switching URLs

 While navigating through the different product URLs to check variations, you may have noticed that clicking back and forward doesn't update the product data on the page.

This is because Vue-router realizes the same component is being used between the pages, and so, rather than destroying and creating a new instance, it reuses the component. The downside to this is that the data does not get updated; we need to trigger a function to include the new product data. The upside is that the code is more efficient.

To tell Vue to retrieve the new data, we need to create a watch function; instead of watching a variable, we are going to watch the $route variable. When this gets updated, we can load ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required