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.

Demo

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

https://jsfiddle.net/darkylmnx/xo5ra1jt/

Here’s another jsfiddle with async guards to compare:

https://jsfiddle.net/darkylmnx/xo5ra1jt/2/

Tutorial

https://medium.com/@arieldi/yes-this-is-how-vue-router-guards-work-when-to-use-them-ed7e34946211