What are navigation guards in vue router?

The navigation guards of vue-router are used to protect navigations either by redirecting it or canceling it.

Below are the 3 different ways to hook into router navigations

1. Global:
2. Per-route:
3. In-component: