Creating in-component guards

We can use the following methods individually or together inside a route component to create the navigation guards for a specific component.

The beforeRouteEnter guard: 

Just like in the global before guard and the beforeEnter per-route guard, the beforeRouteEnter guard is called before the route renders the component, but it is applied to the component itself. We can register this type of guard using the beforeRouteEnter method, as follows:

beforeRouteEnter (to, from, next) { ... }

Because it is called before the component instance, it does not have access to the Vue component via the this keyword. But this can be resolved by passing a callback of the Vue component to the next argument:

beforeRouteEnter (to, from, next) {
  next(vueComponent => { ... })
}

The beforeRouteLeave guard:

In comparison, the beforeRouteLeave guard is called when the component that is rendered by the route is about to navigate away from...