Hi 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 a 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 are going to build. We have created this really cool ViewSchool travel app. As you can see, we have a navigation at the top with a link to the home page and 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 also have some experiences under the destination text.
When you click these, it will load the experience component, which will show you more information on the experience and 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. We also have an anchor tag so that the page scrolls to the top of the experiences, making it easier for us to navigate.
And of course, I am sure you have seen the fade transitions that have been added when changing the routes. Now that you have seen what we are 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.
And to make it easier for you, I have 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 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. Feel free to use the editor you are comfortable with. However, if you are new to coding, then I highly recommend Visual Studio Code and you can download it here for free.
You can then add the Buter extension for syntax highlighting. or you can add the Vue VS Code extension pack by Sarah Drasner, which will not only give you Vuter, but Vue snippets and so much more, including the night out theme that you will see me using in this course. We will also be using the Vue Developer Tools, which makes it easier for debugging Vue apps, which you can download from the Chrome extensions. It is also available for Firefox.
So that's it. Let's get started. Hi 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 a 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 are going to build.
We have created this really cool ViewSchool travel app. As you can see, we have a navigation at the top with a link to the home page and 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 also have some experiences under the destination text. When you click these, it will load the experience component, which will show you more information on the experience and 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. We also have an anchor tag so that the page scrolls to the top of the experiences, making it easier for us to navigate. And of course, I am sure you have seen the fade transitions that have been added when changing the routes. Now that you have seen what we are 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. And to make it easier for you, I have 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 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.
Feel free to use the editor you are comfortable with. However, if you are new to coding, then I highly recommend Visual Studio Code and you can download it here for free. You can then add the Buter extension for syntax highlighting. or you can add the Vue VS Code extension pack by Sarah Drasner, which will not only give you Vuter, but Vue snippets and so much more, including the night out theme that you will see me using in this course.
We will also be using the Vue Developer Tools, which makes it easier for debugging Vue apps, which you can download from the Chrome extensions. It is also available for Firefox. So that's it. Let's get started.