属性在 Ionic Vue 中的类型 '{ $route(currentRoute: any): void; }' 上不存在

Question

所以我目前正在使用Vue和TypeScript开发Ionic WebApp。现在，我尝试获取路由解析的当前id。为此，我正在研究一个观察者：

export default {
data() {
return {
productId: null,
};
},
watch: {
$route(currentRoute: any) {
this.productId = currentRoute.params.id;
},
},
};

这是我收到的错误消息：

[vue-cli-service] TS2339: Property 'productId' does not exist on type '{ $route(currentRoute: any): void; }'.
[vue-cli-service]     14 |   watch: {
[vue-cli-service]     15 |     $route(currentRoute: any) {
[vue-cli-service]   > 16 |       this.productId = currentRoute.params.id;
[vue-cli-service]        |            ^^^^^^^^^
[vue-cli-service]     17 |     },
[vue-cli-service]     18 |   },
[vue-cli-service]     19 | };

我已经用处理程序符号尝试过了，但这也不起作用。其他人有主意吗？

Answer 1

watch: {
"$route.params.productId": {
handler: function(value) {
this.productId = value
console.log(value);
},
// deep: true,
immediate: true
}
},

在选项中传入immediate:true将立即用表达式的当前值触发回调

Answer 2

要在组件中启用类型推断，请在导出的组件定义上使用Vue.extend()：

import Vue from 'vue'
👇
export default Vue.extend({
data() {
return {
productId: null,
}
},
watch: {
$route(currentRoute: any) {
this.productId = currentRoute.params.id
}
}
})