Our travel app is looking pretty good, but we have a mixture of dynamic and static content. Let's get rid of all the static pages and routes to our destinations. Let's open up the navigation component. And just like we did in the homepage, let's add a v four to loop over all the destinations and print out the router link tag for each destination, which goes to the destination details page.
I'll just copy this from the homepage and paste it here in the navigation component. json file and expose them to the template via a data property. If we take a look over in the browser, we can see all of our destinations have a link in the main navigation, and they go to the destination show page, just like the links on our homepage. This is great.
We did lose our homepage link, though, since it's not a destination. Most sites have a logo that links to the homepage, so let's go ahead and do that. Let's test it out. Perfect.
We've got a logo now and things are official. We can start booking trips or at least we can travel to the homepage with a single click. Now that all of our destinations can be viewed by way of the destination show page, we can remove all those static destination pages. Let's open up the views directory and do that.
Whoops, the about page is still hanging around too. We'll delete that now also. Let's also delete the routes related to those static pages from our routes file as we are no longer using them. Now let's check to see if everything is still working.
Great. Our app is looking good, but we can make it even better. Right now, we're using IDs in our URL to identify each destination. This is great as an ID has no semantic value and will never change, but it's also great to have the name of the destination in the URL as well.
Let's provide both. The ID to give our app something consistent to look up the destination with and the slug to provide a more user-friendly URL and for search engine keywords. Since we've got both, the slug portion can be updated anytime we'd like. While at the same time, any existing links out on the web with a previous slug will still work just fine.
You'll be thankful for this approach in your own apps down the road when you are optimizing for SEO. js file, let's add the param for the slug. Since the slug isn't for actually looking up the destination, we don't have to change anything in our destination show page. We then need to change our router links to have the slug param along with the ID.
slug. We need to do the same in our navigation component. Now, if we look at our application and test it out, we can see that changing the routes now gives us the name of the destination in the URL. Man, that feels a lot nicer.
In this lesson, we really dried up our code. Try, D-R-Y, stands for don't repeat yourself. In a real application, it would have been a nightmare maintaining a separate page for each destination. But having all of our destinations rendered by a single destination show component makes things much more scalable and future-proof.
We also took some simple steps to improve the user experience.