web-dev-qa-db-ja.com

Typescriptを使用してVue.jsのルート変更を監視する

TypeScriptを使用してVue.jsアプリケーションのURLの変更を検出したいのですが。 JavaScriptでは、これは次のように実行できます。

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

onUrlChange(newUrl){
   // Some action
}

TypeScriptで同じことをするにはどうすればよいですか？

typescriptvue.jsvue-routerwatch
12
luthien

私はここで解決策を見つけました： https://github.com/kaorun343/vue-property-decorator

これは次のように行うことができます：

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

これは私にとっての方法でした

<script lang="ts">
import Vue from 'vue'
import { Route } from 'vue-router'

export default Vue.extend({
  name: 'HelloWorld',
  watch: {
    '$route': {
      handler: function(to: Route): void {
        // Do something here.
        console.log(to)
      },
      immediate: true,
    },
  },
})

</script>
0
Leopold Kristjansson