darkylmnx wrote a nice tutorial on how to use vue-router guards.

vue router guards

What is Vue Router? If you already know the answer, skip to the next title. For others, Vue Router also known as vue-router on github, is the official third-party plugin used to handle Routing / URL state for Vue JS apps.

What are Vue Router guards ? Basically, Vue Router only switches components for you depending on the URL. It does not handle AJAX calls to the server or role-based auth protection for example. Why? Simply because it’s not what it was created for.


Here’s a jsfiddle with all the guards added to see how the sequence goes:


Here’s another jsfiddle with async guards to compare: