Let me show you something really quick in the DevTools. If we click on root, you see that we have this special $root property. If we inspect that, you can see that we have access to not just the path and name, but also params, query, and meta. So how do we access this data in our components?
use router, we can actually access the router instance under this $root in any component. since it's made globally available on the main view instance. Our app is looking great. However, in a normal travel app, we would not have only four destinations, but hundreds.
And if we had to create a page for each one and maintain it, then it would be a lot of work. Let's work with Ruth Params so that we can load only one page, but with the correct details for each destination. Let's create a destination details page with a H2 tag and some text. Hello, details.
Let's add our new route to the router using the lazy loading method. In our home page, let's make our destination name and image linked to this new page. We will use named routes instead of linking directly to each path. js.
This makes it a lot easier to work with and it is recommended to always use named roots. To use named roots you just add an object with the name property and the value being the name of the page you want to link to. js so you can see what I mean about how named roots work. Let's change details to be View School Travel App.
Now you will see that if we click a link it will go to that page and have view school travel app in the URL. Let's change it back to details. Okay, so our links go to the destination details component and it shows our hello details text. But this is pretty useless right now.
Let's add the ID of the destination so that when we click on a destination it will show the correct ID. To do this we need to use params. In our home page we need to tell the router link to pass params of ID and make it equal to the ID that comes from our destination data. Let's add a paragraph tag in our destination details page with some text and add the params that we have available to us through the root property.
Now if we click on a photo or name of the destination, we will see the ID for that destination. Pretty cool, right? Okay, not so cool, but we are getting there. In the next video, we will make it even more useful.
Let me show you something really quick in the DevTools. If we click on root, you see that we have this special $root property. If we inspect that, you can see that we have access to not just the path and name, but also params, query, and meta. So how do we access this data in our components?
use router, we can actually access the router instance under this $root in any component. since it's made globally available on the main view instance. Our app is looking great. However, in a normal travel app, we would not have only four destinations, but hundreds.
And if we had to create a page for each one and maintain it, then it would be a lot of work. Let's work with Ruth Params so that we can load only one page, but with the correct details for each destination. Let's create a destination details page with a H2 tag and some text. Hello, details.
Let's add our new route to the router using the lazy loading method. In our home page, let's make our destination name and image linked to this new page. We will use named routes instead of linking directly to each path. js.
This makes it a lot easier to work with and it is recommended to always use named roots. To use named roots you just add an object with the name property and the value being the name of the page you want to link to. js so you can see what I mean about how named roots work. Let's change details to be View School Travel App.
Now you will see that if we click a link it will go to that page and have view school travel app in the URL. Let's change it back to details. Okay, so our links go to the destination details component and it shows our hello details text. But this is pretty useless right now.
Let's add the ID of the destination so that when we click on a destination it will show the correct ID. To do this we need to use params. In our home page we need to tell the router link to pass params of ID and make it equal to the ID that comes from our destination data. Let's add a paragraph tag in our destination details page with some text and add the params that we have available to us through the root property.
Now if we click on a photo or name of the destination, we will see the ID for that destination. Pretty cool, right? Okay, not so cool, but we are getting there. In the next video, we will make it even more useful.