Watch route changes in Vue.js with Typescript

Question

I'd like to detect changes in my URL in a Vue.js application using TypeScript. In JavaScript this can be done as follows:

watch: {
  '$route': {
     handler: 'onUrlChange',
     immediate: true,
     deep: true
   }
},

onUrlChange(newUrl){
   // Some action
}

How could I do the same in TypeScript?

question from:https://stackoverflow.com/questions/65851351/vuejs-pass-watch-route-to-class-component

Answer 1

I found the solution here: https://github.com/kaorun343/vue-property-decorator

It can be done like this:

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: any) {
      // Some action
    }