We now have an application that is looking pretty good, but we have a mixture of dynamic and static content. We now need to get rid of all the static pages and routes to our destinations. id. We will also remove the static links and wrap everything in an unordered list.
id and then we need to import our store so we have access to the destination's data. And to make things a little nicer let's add a logo and style our navigation. We can remove the styles we don't want and add our new styles to the end. Now if you click on the navigation for Brazil it will show you the Brazil details and in the route we have details slash two.
Great! But hang on a second. If we click on Panama the route params change but I still see the details of Brazil. However if I click on the home and then click on Panama it works.
Also you will notice if you change the number in the route URL to a different ID it doesn't load the content for that destination. However, if we check our DevTools and look at the roots, the roots are changing each time we click a different root. Our router seems to work. But what is happening here?
Why are we not getting the content we want? This is because ViewRouter does not notice any change if the same component is being used. We need the component to be reloaded with the new data. path.
With the key, any change to the path will trigger a reload of the component with the new data. Let's test it out. Perfect. Now navigating to the destinations works as expected.
We can now remove our static pages. We can delete the four destinations from the views folder as well as the about page. Now let's check to see if it is still working. Perfect.
Let's also make our homepage links a little nicer. Let's add some styles. That looks better. We now have an application that is looking pretty good, but we have a mixture of dynamic and static content.
We now need to get rid of all the static pages and routes to our destinations. id. We will also remove the static links and wrap everything in an unordered list. id and then we need to import our store so we have access to the destination's data.
And to make things a little nicer let's add a logo and style our navigation. We can remove the styles we don't want and add our new styles to the end. Now if you click on the navigation for Brazil it will show you the Brazil details and in the route we have details slash two. Great!
But hang on a second. If we click on Panama the route params change but I still see the details of Brazil. However if I click on the home and then click on Panama it works. Also you will notice if you change the number in the route URL to a different ID it doesn't load the content for that destination.
However, if we check our DevTools and look at the roots, the roots are changing each time we click a different root. Our router seems to work. But what is happening here? Why are we not getting the content we want?
This is because ViewRouter does not notice any change if the same component is being used. We need the component to be reloaded with the new data. path. With the key, any change to the path will trigger a reload of the component with the new data.
Let's test it out. Perfect. Now navigating to the destinations works as expected. We can now remove our static pages.
We can delete the four destinations from the views folder as well as the about page. Now let's check to see if it is still working. Perfect. Let's also make our homepage links a little nicer.
Let's add some styles. That looks better.