In this video, we will create our own routes and refactor the code a little and remove the demo content that is given to us when we first install everything. To get started, download the starter files which include all of the images and data that you will need for this project. You'll find a link to it in the description below. Next, we will copy the images folder from the downloaded starter files into the public directory of our project.
json file into the source folder. Now, let's get our styles into the app. css file from the starter files into the app's public directory. css file.
view. We can go ahead and remove the View logo as well, and the Hello World component, if you haven't already. vue. vue with the following.
There's one last thing we need to do in order for our styles to be applied correctly. Let's wrap our router view in a div with the class of container. This div will act as a wrapper or a container around the content of our pages and keep it constrained to a max width of nine hundred and sixty pixels. It's really convenient that we only have to provide this container once and not on every single page.
In order to create our routes, we will need somewhere for the routes to go. Let's create a page called Brazil in the Views folder with an H one tag and the name Brazil. Now let's connect the Brazil page to a route. In the routes array, let's add a new object.
The route object requires a path and a component property. In our case, the path will be slash Brazil. Let's make this a named route so that it's easy to link to with the router link. And we will naturally use the Brazil component.
So let's import it and use it. In app dot view, let's change the about link to be our Brazil link. And for the sake of our new styles, let's wrap the router links in a div with the ID of now. Now let's take a look and see if it works.
Alright, you will see that when you click on Brazil, it goes to the Brazil page. Let's do the same for Hawaii, Jamaica and Panama. We'll create the pages in the views directory. and create the routes in the router.
vue. You may have noticed that was a lot of routes and a lot of single file components added for each destination page, even when the destination is the same thing, a destination with a name, description, and experiences. Later on in the dynamic routes lesson, we'll consolidate all the destinations to a single file and a single route. Now, let's take a look at our new routes.
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 Routing, you will see information about the current route, including the path, query, etc. If you look at the breadcrumb looking navigation at the top of the dev tools, you can also change the components item to routes. This will show you all of your routes and clicking on them will show you detailed information about each route.
You can also use the filter to quickly find the route that you're 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 just as we did for the destinations by hard coding a link and filling in the name of the destination in the navigation. 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 load all the destinations we have available in the data file and dynamically create a link for each one. json file contains data for each of the destinations we just made pages for. Let's import the data. We do this by adding import source data from at slash data dot JSON.
I like to call this variable source data so as not to be confused with the data property on the view component. destinations so that we can refer to it in our code as just destinations. This makes our code clean and easier to read. In order to see all the destinations we have, we will need to use a v-for directive, which will loop over our array of destinations and print out each one.
destinations. id. Every time we use a V four, 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 destination ID as the unique key. Now let's add a to attribute that links to the destination slug. In our destinations, we have a slug property whose value is a URL friendly version of the name of the destination. Each destination will also display its name and associated image.
Let's make our h one tag say all destinations. And then wrap the destinations in a div with the class of destinations. 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.