We are now going to add some experiences to our destinations. Experiences are places you can go to or things you can do in a destination. In our destination details component, let's add a new section with a class of experiences and we will add a heading for our experiences. name.
We will need to add a div as a wrapper around our sections as view only allows us to have a single root element in our template. slug and a class of card. We can then add the image and the name of the experience. And let's add some styles to make it a bit more beautiful.
Let's take a look at what we have created. As you can see, we have no experiences. Let's check to see if we have errors. Property or method experiences is not defined in the instance, but referenced during render.
Let's take a look at our code. We have created a V4 experience in Experiences, but our experiences are inside our destinations. Let's fix it. Now if we click on Brazil, you will see we have the top experiences in Brazil, and it shows us the four experiences we have.
Great! Now let's add some details for those experiences. Let's create an Experience Details page in our Views folder. We will add a heading with the title of Experiences, and then we can print the name and image and the description.
We will need to import the store so that we have access to the data. And we shall pass down the props of slug and a new one for the experiences, which we shall call experiences slug. We can then create a computed property so that we can search through all our destinations to find the destination that is equal to the right slug and another computed property called experience so that once we have the right destination, we can search through that to find the experience that is equal to the experience slug. which we have access to truer props.
Almost there, let's add the styles so that it will look amazing. Let's add a router link tag in our destination details page to go to the experience details page. slug. We want to show the experiences on the same page under the list of experiences, as opposed to clicking to a new page, as this will give us a better user experience.
This is a common pattern. and we will call these routes nested routes. In order to do this in our destination details page, we need to add a router view tag so that we can load our experience details view here. path so that it forces a replacement of the router view component every time a navigation event occurs.
If you forget to add a key to the router view, it will not update, so please remember this. js file, we can make the experience details a child of the destination details. To do this we create a children property and inside it we put the root for the experience details. As this is a child of the destination details we don't need to have the details or the params slug in the root so we can now remove it and have the path as just the experience slug params.
Okay let's test it out. Now clicking on an experience will load the experience at the bottom of the destination details and we can still see that our route has the details and the destination and the experience. It doesn't really make sense to have the word details here so let's go and change it. Let's change it to destination.
Now if we navigate in our app we can see the word destination instead of details and it works perfect. Did you notice that we have just changed the route path yet we didn't have to change anything in our links or in any of our components. This is because we are using named routes. That means we can change the path to whatever we like and we don't have to worry about refactoring any of our code.
Let's investigate in the DevTools what our new route looks like. You will now see we only have two routes, the home route and the destination details route. We can see that the path for destination details has a path of destination with the params of slug. So where is our experience details route?
As it is a nested route of the destination details it is now inside this route. If we click on the arrow beside the route we can see our experience details route and clicking on that shows us the path and the name. This is how we can tell what routes are child routes and if we had more child routes they would also appear here. We are now going to add some experiences to our destinations.
Experiences are places you can go to or things you can do in a destination. In our destination details component, let's add a new section with a class of experiences and we will add a heading for our experiences. name. We will need to add a div as a wrapper around our sections as view only allows us to have a single root element in our template.
slug and a class of card. We can then add the image and the name of the experience. And let's add some styles to make it a bit more beautiful. Let's take a look at what we have created.
As you can see, we have no experiences. Let's check to see if we have errors. Property or method experiences is not defined in the instance, but referenced during render. Let's take a look at our code.
We have created a V4 experience in Experiences, but our experiences are inside our destinations. Let's fix it. Now if we click on Brazil, you will see we have the top experiences in Brazil, and it shows us the four experiences we have. Great!
Now let's add some details for those experiences. Let's create an Experience Details page in our Views folder. We will add a heading with the title of Experiences, and then we can print the name and image and the description. We will need to import the store so that we have access to the data.
And we shall pass down the props of slug and a new one for the experiences, which we shall call experiences slug. We can then create a computed property so that we can search through all our destinations to find the destination that is equal to the right slug and another computed property called experience so that once we have the right destination, we can search through that to find the experience that is equal to the experience slug. which we have access to truer props. Almost there, let's add the styles so that it will look amazing.
Let's add a router link tag in our destination details page to go to the experience details page. slug. We want to show the experiences on the same page under the list of experiences, as opposed to clicking to a new page, as this will give us a better user experience. This is a common pattern.
and we will call these routes nested routes. In order to do this in our destination details page, we need to add a router view tag so that we can load our experience details view here. path so that it forces a replacement of the router view component every time a navigation event occurs. If you forget to add a key to the router view, it will not update, so please remember this.
js file, we can make the experience details a child of the destination details. To do this we create a children property and inside it we put the root for the experience details. As this is a child of the destination details we don't need to have the details or the params slug in the root so we can now remove it and have the path as just the experience slug params. Okay let's test it out.
Now clicking on an experience will load the experience at the bottom of the destination details and we can still see that our route has the details and the destination and the experience. It doesn't really make sense to have the word details here so let's go and change it. Let's change it to destination. Now if we navigate in our app we can see the word destination instead of details and it works perfect.
Did you notice that we have just changed the route path yet we didn't have to change anything in our links or in any of our components. This is because we are using named routes. That means we can change the path to whatever we like and we don't have to worry about refactoring any of our code. Let's investigate in the DevTools what our new route looks like.
You will now see we only have two routes, the home route and the destination details route. We can see that the path for destination details has a path of destination with the params of slug. So where is our experience details route? As it is a nested route of the destination details it is now inside this route.
If we click on the arrow beside the route we can see our experience details route and clicking on that shows us the path and the name. This is how we can tell what routes are child routes and if we had more child routes they would also appear here.