How do I add a beforeEach navigation guard to a route within the Component that is specified on the route?

[trajano]

Rather than letting the main.ts have the navigation guards thus accessing the data needed by the guards, is it possible for the component using Composition API to perform the check? Because it appears that it executes the onBeforeRouteUpdate AFTER the values have changed and not do the check on the initial value.

I am thinking that internally it may be implemented as something like

const onBeforeEnter = ((callback)=> {
  const next = (val) => {
    ...
    if (val === true or val === undefined) {
       return; // everything ok
    } else if (val instanceof Error) {
       // basically when this occurs use the `throw` exception system to break 
      // from the current execution path and have something else handle it.
       throw val;
    }
   }
  callback(to, from, next)
));

[posva]

This is not possible because the component is mounted after the navigation happens and therefore the navigation guard is added then. There is this proposal to bring the possibility of such a pattern: vuejs/rfcs#460