Vue
Introduction to Vue.js: Routing

Exercise: Working with Routes

PRO
Outline

We’ve reached a point in this course where it is time to bring in all the knowledge we have learned thus far. This exercise is meant to stretch your abilities a little bit, but I know you can do it.

For this exercise, I want you to take the data which you are displaying now in the brewery search component – the brewery type, city, state, and website URL- and display it in another component.

I want you to make a button on each of the brewery items which will take you to a different route, and pass the brewery ID to that new component. You can use props, or route params to do this. And, you can choose to use a named route or not.

From the new component, use the created life cycle hook and Axios to call the brewery api with the ID from the parent to get the details. If you forgot about the lifecycle hooks, they are covered the components section.

Finally, I want you to do all of this with the history mode, and not hash mode, and create a catch all component in case something goes wrong with navigating to the ID.

Please check out the OpenBrewery API to see how to get details by id: https://www.openbrewerydb.org/documentation/02-getbrewery

 

I finished! On to the next chapter