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

Posted 2023-02-22

【中文标题】类型 \' $route(currentRoute: any): void; 上不存在属性\' 在 Ionic Vue 中

【英文标题】：Property does not exist on type ' $route(currentRoute: any): void; ' in Ionic Vue类型 ' $route(currentRoute: any): void; 上不存在属性' 在 Ionic Vue 中

【发布时间】：2021-07-09 20:43:58

【问题描述】：

所以我目前正在使用 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 | ;

我已经尝试过使用处理程序表示法，但这也没有用。其他人有想法吗？

【问题讨论】：

路线是什么样的？

【参考方案1】：

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

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

【参考方案2】：

对于enable type inference in components，在导出的组件定义上使用Vue.extend()：

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