Touring Vue Router (Options API)

Lessons

1. Introduction

1:21

2. Receiving URL Parameters

4:30

3. Building Pagination

9:53

4. Nested Routes

10:07

5. Redirect & Alias

5:53

6. Programmatic Navigation

5:24

7. Error Handling and 404s

8:05

8. Flash Messages

5:27

9. In-Component Route Guards

11:02

10. Global and Per-Route Guards

10:03

11. Wrapping Up

9:44

In-Component Route Guards

In this lesson we’ll use In-Component Route Guards to show a progress bar and only load the component if it’s successfully returned from our API. The goal is to provide a better user experience.

🛑 Problem: When our API is slow our page looks broken

At the moment EventList looks like this when it loads slowly:

![https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%