Navigation guards
Navigation guards in Vue are fundamental for logged-in users. As with any core functionality of Vue, it’s worth diving into the amazing documentation provided by the Vue team here: https://router.vuejs.org/guide/advanced/navigation-guards.html.
A navigation guard is, as the name suggests, a way to cancel or reroute users depending on the results of certain guard rails checks. They can be installed globally – for example, everything is behind a login/paywall – or they can be placed on individual routes.
They are called on a navigation request, in order, and before a component is loaded. They can also be used to retrieve props to be provided to the next pages components and use the syntax of router.beforeEach (to, from).
Previous versions also provided a next parameter, but this has been deprecated and shouldn’t be used in modern code.
The functionality of a navigation guard is as follows:
to: Provides the target location...
