Let's make our destination details be a bit more useful by printing the details of the destination instead of just an ID. js and add the params of ID to the end of the details path. The colon declares a dynamic segment in the path, which allows us to respond to URLs matching the specified pattern. So when a user visits details slash one or details slash two, the user will be served the same route when the path is set to details, slash, colon, ID.
Then in destination's details page, we need to retrieve the value from the params. So let's create a new data property called destination ID and give it the value of this dollar root dot params dot ID. It is not actually necessary to create this to get what we want, but it will make your code much cleaner and easier to follow. Now in our template, we can add the destination name, the description, and the photos.
But how is this going to work? How will it know which destination to show? Let's add a computed property with a function called destination. Computed properties allow us to define a property that is used the same way as data but can also have some custom logic that is cached based on its dependencies.
We can use JavaScript's find method. The find method returns the value of the first element in the array that satisfies the provided testing function. destinations. destinations and inside the brackets we create an arrow function and pass in the destination.
id. We can refer to it using the this keyword and we then need to return it so that we get the value we want. Basically we are saying go to the store and use the destinations array and find the destination whose ID is equal to the destination ID that we get from the params. In the script we need to import the store so that we have access to the data.
We will also add some styles so that it looks a bit nicer. Now if we take a look at our application and click on Panama it will go to the details route and load the details for Panama. and it will put the ID of 2 at the end of the URL. Going to Brazil shows the Brazil details and puts the ID of 1 and so on.
We can also see in the DevTools under the Router option that every time we click on a route we can see what the path is, the params ID and the name of the component, which is destination details. Let's make our destination details be a bit more useful by printing the details of the destination instead of just an ID. js and add the params of ID to the end of the details path. The colon declares a dynamic segment in the path, which allows us to respond to URLs matching the specified pattern.
So when a user visits details slash one or details slash two, the user will be served the same route when the path is set to details, slash, colon, ID. Then in destination's details page, we need to retrieve the value from the params. So let's create a new data property called destination ID and give it the value of this dollar root dot params dot ID. It is not actually necessary to create this to get what we want, but it will make your code much cleaner and easier to follow.
Now in our template, we can add the destination name, the description, and the photos. But how is this going to work? How will it know which destination to show? Let's add a computed property with a function called destination.
Computed properties allow us to define a property that is used the same way as data but can also have some custom logic that is cached based on its dependencies. We can use JavaScript's find method. The find method returns the value of the first element in the array that satisfies the provided testing function. destinations.
destinations and inside the brackets we create an arrow function and pass in the destination. id. We can refer to it using the this keyword and we then need to return it so that we get the value we want. Basically we are saying go to the store and use the destinations array and find the destination whose ID is equal to the destination ID that we get from the params.
In the script we need to import the store so that we have access to the data. We will also add some styles so that it looks a bit nicer. Now if we take a look at our application and click on Panama it will go to the details route and load the details for Panama. and it will put the ID of 2 at the end of the URL.
Going to Brazil shows the Brazil details and puts the ID of 1 and so on. We can also see in the DevTools under the Router option that every time we click on a route we can see what the path is, the params ID and the name of the component, which is destination details.