使用 Typescript 观察 Vue.js 中的路由变化答案

【问题标题】：Watch route changes in Vue.js with Typescript使用 Typescript 观察 Vue.js 中的路由变化
【发布时间】：2019-01-24 07:15:18
【问题描述】：

我想使用 TypeScript 在 Vue.js 应用程序中检测我的 URL 的变化。在 JavaScript 中，这可以按如下方式完成：

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

onUrlChange(newUrl){
   // Some action
}

我怎样才能在 TypeScript 中做同样的事情？

【问题讨论】：

标签： typescript vue.js vue-router watch

【解决方案1】：

我在这里找到了解决方案：https://github.com/kaorun343/vue-property-decorator

可以这样做：

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

【讨论】：

newVal 类型为import { Route } from 'vue-router'

【解决方案2】：

这就是我的方式

<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>

【讨论】：

这更像是 JS 方式的手表