Learn how Vue Router Guards work and when to use them
darkylmnx wrote a nice tutorial on how to use 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:
This post is submitted by one of our members. You may submit a new post here.