Vue-class-component: vue-router integration fails on beforeRoute* guards

[silkentrance]

See https://gist.github.com/silkentrance/9caa45481329f6ef911bd5eae5dbb7c3

See also https://github.com/vuejs/vue-class-component/issues/192#issuecomment-344761460 for more information.

[silkentrance]

@ktsn I am lazy :grin:

[silkentrance]

the solution would be to not register the guards on options.methods but directly on the options object itself, e.g.

if (typeof descriptor.value === 'function') {
      // methods
      options[key] = descriptor.value
    } else if (descriptor.get || descriptor.set) {
      // computed properties
      (options.computed || (options.computed = {}))[key] = {
        get: descriptor.get,
        set: descriptor.set
      }
    }

And AFAIK, options.computed will also not be interpreted by vue-router. So these need to be registered directly as properties of the options object, too.

[ktsn]

router.ts still load the component before calling registerHook because all import statement will be hoisted and executed before all other statements.

Please try separate the registerHook in another file and import it before the component as same as docs.

[silkentrance]

@ktsn which is the example provided. will try.

[silkentrance]

@ktsn now it works as expected. still trying to figure out why. is there some second stage processing in vue-router or vue-class-component? anyway, thanks for your incredible help figuring this out. perhaps it should be made more clear in the documentation that registering the guards in a separate module is a vital step.

[johnsmithjsjs]

perhaps it should be made more clear in the documentation that registering the guards in a separate module is a vital step.

That would be reeeeaally great. I made the same mistake and spent a lot of time on this(