The class component needs to understand what are the navigation guards that are being added to the Vue prototype before executing the Vue application. Because of this, we needed to import the custom hooks on the first line of the main.ts file.
In the component, with the hooks registered, it's possible to add them as methods because the vue-class-component has made all those custom imports into base methods for the component decorator.
We used two of the vue-router navigation guards' hooks. Those hooks are called each time a route will enter or leave. The first two parameters we didn't use, the to and from parameters, are the ones that carry information about the future route and the past route.
The next function is always required because it executes a route change. If no argument is passed in the function, the route will continue with the one that was called, but if you want to change the route on the fly, it is possible to pass an argument to change where the user will go.