Reacting to Param Changes

In this lesson, we take a look at a common gotcha when it comes to using route params with Vue Router and how to account for it. Since the same component instance will be reused when navigating between pages registered to use the same component, some Vue lifecycle hooks that you might expect to fire, will not. There is good reason for this, but you must be aware of it and respond appropriately.

Links

• Vue Router Docs - Reacting to Param Changes
• Vue 3 Docs - key attribtue
• Fetch MDN Docs
• Dummy API

⚠️ IMPORTANT: If the dummy api is giving you CORS issues you can simulate the API in your local project by doing the following:

1. Provide a JSON file for each location in the public directory (and for the sake of organization in a new api directory)
2. Make your async requests to the local endpoints like this: fetch("/api/brazil.json")
3. You can copy the json file contents from this commit in the repo (also notice the repo shows the location where you would store these - @/public/api)