#26 - Routing Setup & Basics - Vue 3 (Options API) Tutorial

In this Vue 3 tutorial, we learn how to navigate to different pages in our app with routing. We cover how to install the router package, create and load routes to components and views, dynamic route links and redirecting and 404 routes. Finally, we take a look at how to navigate programmatically and how to lazy load routes to improve application performance.

We cover the following topics:
1. What is routing?
2. How to setup the routing system
3. How to create a route
4. How to load router components
5. How to link to routes
6. How to style an active router link
7. Named router links
8. How to redirect a route to another
9. Catch-all routes & 404 pages
10. The History API (programmatic navigation)
11. Lazy loading pages
12. How to generate a new project with the Router package

_Note that this tutorial is for the Vue 3 Options API (which is similar to Vue 2). We later move on to the Composition API and then the Script Setup (3.2 update)_

This lesson is also available in written format

Check out the Vue 3 for Beginners playlist for more Vue tutorial videos

Subscribe to the channel and never miss a lesson

Visit the website for a wide range of programming tutorials

[ericgiant]

Most clear, quick and usefull tutorial I have ever found. would recommend

[hakan_temur]

Thanks for the tutorial. It's very basic and clear.