Vue-class-component: observe router lifecycle hooks

[tonypee]

It would be nice to observe beforeRouteEnter and beforeRouteLeave as lifecycle hooks. Should they be added to the internal hooks list?

They seem as common, if not more common than some of the other hooks, especially for confirming page exit

[ktsn]

IMHO, vue-class-component should only depend on the vue core. If it depends on other plugins, the APIs can be wasteful for the users that does not use the plugins.

FYI, you can achieve this by creating a custom decorator.

import { createDecorator } from 'vue-class-component'

const Hook = createDecorator((options, key) => {
  options[key] = options.methods[key]
  delete options.methods[key]
})

// ---------

@Component
class MyComp extends Vue {
  @Hook
  beforeRouteEnter () {
    // ...
  }
}

[yeluoqiuzhi]

I have copied your code into a third module,vue-router-decorator.
You can use it like this:

import {RouterHook, Router} from 'vue-router-decorator';
@Component({
    name: 'XXComponent'
})
export default class XX extends Vue implements Router{
    @RouterHook
    beforeRouteEnter(to, from, next) {
        next();
    }
    @RouterHook
    beforeRouteLeave(to, from, next) {
        next();
    }
}

[tonypee]

I agree with @ktsn that the library should not be bound to to other libs. But, maybe this then calls for the ability to extend it - the same way that Vue.use(VueRouter) adds the hooks to the lifecycle of a component,

Component.use(VueRouter) could extend it with the hooks?

that way, the component is gaining the same extensions as the vanilla vue object

[ktsn]

@tonypee Released the extending hooks feature as v4.4.0 :)
https://github.com/vuejs/vue-class-component#adding-custom-hooks

[tonypee]

that looks perfect! great work

[rene-dohan]

Hook is not called when Component is extending class and its defined in extended class, this is feature ?