In this video, we will create our own routes and refactor the code a little to remove the demo content that is given to you when you first install everything. To get started, just download the starter files, which includes all the images and the data that you need for this project. Next, we will copy all the images from the assets folder into your project's assets folder. js file into the source folder.
In order to create our routes, we will need somewhere for the routes to go to. Let's create a page for Brazil in the views folder. We'll call it Brazil with a H2 tag and the name Brazil. js file.
In the roots array, let's add a new object. The root object requires a path and component property. In our case, the path will be Brazil. Let's make this a named root so it's easy to link to with a router link.
and we will naturally use the Brazil component. So let's import it and use it. View, let's change the About link to be our Brazil link. Now let's take a look and see if it works.
You will now see that when we click on Brazil, it goes to the Brazil page. Let's do the same for Hawaii, Jamaica and Panama. Let's add a padding of 0, 10 pixels to all our links. This will give us a left and right padding of 10 pixels.
Let's take a look at our new routes. And as you would expect, clicking on any of the destinations brings us to the correct page. And if we inspect in the View DevTools under the Router option, you will see where the router goes from and to, as you open a new route, and you will also see the name of the route and the path. And if you select the second option from the dropdown, it will show you a list of all your routes, and clicking on them will show the path and the name.
You can also use the filter to quickly find the route you are looking for. Now that we have many destinations, we probably want to list all of them in the home page. We can of course do that as we did for Brazil by hard-coding a link and filling in the name of the destination. That would work, but usually we have a lot of destinations, and copy and pasting the links is not so much fun.
What we can do instead is to load all the destinations we have available in the store file and dynamically create a link for each one. As we are going to use our data for this, we will need to import the store. Before we import the store, let's remove the Hello World component and the logo. We can also delete these from our components and assets folder as we no longer need them for this app.
Let's import the store. js. The at symbol is an alias for the source folder and it is the same as writing slash src. destinations so that we can refer to it in our code as just destinations.
This just makes our code cleaner and a little easier to read. In order to see all the destinations we have, we will need to use a v4 directive which will loop over our array of destinations and print out each one. name. Every time we use a v4, we need to add a unique key attribute.
This allows Vue to keep track of which element is which for when it has to reorder or reuse these elements. We shall use the name as the unique key. Now let's add a router link tag that links to the destination slogan. In our store, we have a slogan property whose value is the name of the destination.
Let's add a H1 tag with the text All Destinations, and let's wrap the destinations in a div with the class Destinations. We also need to add some styles so that it looks good. We are using scoped styles, which means our styles are scoped to this component only. Now if we look at our homepage, we can see four destinations, and if you click on one of the destinations, you will see that the route changes.
In this video, we will create our own routes and refactor the code a little to remove the demo content that is given to you when you first install everything. To get started, just download the starter files, which includes all the images and the data that you need for this project. Next, we will copy all the images from the assets folder into your project's assets folder. js file into the source folder.
In order to create our routes, we will need somewhere for the routes to go to. Let's create a page for Brazil in the views folder. We'll call it Brazil with a H2 tag and the name Brazil. js file.
In the roots array, let's add a new object. The root object requires a path and component property. In our case, the path will be Brazil. Let's make this a named root so it's easy to link to with a router link.
and we will naturally use the Brazil component. So let's import it and use it. View, let's change the About link to be our Brazil link. Now let's take a look and see if it works.
You will now see that when we click on Brazil, it goes to the Brazil page. Let's do the same for Hawaii, Jamaica and Panama. Let's add a padding of 0, 10 pixels to all our links. This will give us a left and right padding of 10 pixels.
Let's take a look at our new routes. And as you would expect, clicking on any of the destinations brings us to the correct page. And if we inspect in the View DevTools under the Router option, you will see where the router goes from and to, as you open a new route, and you will also see the name of the route and the path. And if you select the second option from the dropdown, it will show you a list of all your routes, and clicking on them will show the path and the name.
You can also use the filter to quickly find the route you are looking for. Now that we have many destinations, we probably want to list all of them in the home page. We can of course do that as we did for Brazil by hard-coding a link and filling in the name of the destination. That would work, but usually we have a lot of destinations, and copy and pasting the links is not so much fun.
What we can do instead is to load all the destinations we have available in the store file and dynamically create a link for each one. As we are going to use our data for this, we will need to import the store. Before we import the store, let's remove the Hello World component and the logo. We can also delete these from our components and assets folder as we no longer need them for this app.
Let's import the store. js. The at symbol is an alias for the source folder and it is the same as writing slash src. destinations so that we can refer to it in our code as just destinations.
This just makes our code cleaner and a little easier to read. In order to see all the destinations we have, we will need to use a v4 directive which will loop over our array of destinations and print out each one. name. Every time we use a v4, we need to add a unique key attribute.
This allows Vue to keep track of which element is which for when it has to reorder or reuse these elements. We shall use the name as the unique key. Now let's add a router link tag that links to the destination slogan. In our store, we have a slogan property whose value is the name of the destination.
Let's add a H1 tag with the text All Destinations, and let's wrap the destinations in a div with the class Destinations. We also need to add some styles so that it looks good. We are using scoped styles, which means our styles are scoped to this component only. Now if we look at our homepage, we can see four destinations, and if you click on one of the destinations, you will see that the route changes.