Hey everyone, and welcome to our course on Vue Router. js. We need to use the router so that we can navigate between the different pages in our app. In this course, we will cover everything you need to know in order to get an SPA, or single page application, up and running with different routes.
We will also cover some cool features such as route transitions, dynamic routing, lazy loading, and so much more. Let's take a look at what we're going to build. We have created this really cool View School Travel app. As you can see, we have a navigation bar at the top with a link to the homepage and also links to various destinations.
We can also navigate to the destinations by clicking on the text or the pictures below. When we click on a destination, we go to the destination page and the destination name appears in our route. The go back button allows us to go back to the last page we visited. We also have some experiences underneath the destination text.
When you click on any of these, it will load the experience component and show you more information on the experience. You will also see its name in the route. This is an example of nested routes. As you will see in the URL, it has the destination and then the name of the experience.
And of course, I am sure you've seen the fade transitions that have been added when changing routes. Now that you've seen what we're going to create, let's discuss what you need in order to create your own travel app. Feel free to just watch the videos. However, I highly recommend that you code along with me so that we can create this app together.
I promise you'll learn more that way. To make it easier for you, I've included the starter files. You will find a link to the starter files in the description of this course, where you can clone or download them from GitHub. The starter files include all the images and data that you will need in order to create this app.
However, feel free to be creative and change things to your own unique look and feel. Don't forget, you can pause the video at any stage so that you can write your code in your own time. I will be using Visual Studio Code throughout this course, but feel free to use whatever editor you are comfortable with. js support.
It can be found in the Visual Studio Code marketplace. We will also be using the Vue developer tools, which makes it easier for debugging Vue apps, which you can download from the Chrome extension store. At the time of this recording, you'll need to use the beta version of DevTools to work with Vue three. All right, that's it.
Let's get started.