Vue + Typescript vue-router 和参数类型

Posted 2023-02-22

【中文标题】Vue + Typescript vue-router 和参数类型

【英文标题】：Vue + Typescript vue-router and type of params

【发布时间】：2020-05-07 19:31:15

【问题描述】：

我正在尝试将一些数据从一个组件发送到另一个组件，但我遇到了一些类型问题。 这是我的代码：

const someData: object = 
   param1: 'param1',
   param2: 'param2',
   array: [,]

this.$router.push( name: 'SomePage', params:  someData  ) 

我是这样获取数据的：

  get param1 (): string 
    return this.$route.params.someData['param1']
  
  get param2 (): string 
    return this.$route.params.someData['param2']
  
  get array (): Array<object> 
    return this.$route.params.someData['array']
  

还有来自控制台的错误：

Argument of type ' name: string; params:  someData: object; ; ' is not assignable to parameter of type 'RawLocation'.
  Type ' name: string; params:  someData: object; ; ' is not assignable to type 'Location'.
    Types of property 'params' are incompatible.
      Type ' someData: object; ' is not assignable to type 'Dictionary<string>'.
        Property 'someData' is incompatible with index signature.
          Type 'object' is not assignable to type 'string'.

仅当我将类型 any 输入到 someData 时它才有效，但我不会不使用它。 我怎么解决这个问题？这是什么'Location' 和'RawLocation' 类型？

【问题讨论】：

我遇到了同样的问题。 Here 是与此相关的 GitHub 问题。有一个回复说“目前，使用 always 字符串是正确的方法，打字很好”。

关于你，@MagnusTeekivi，请检查答案

【参考方案1】：

您可以通过页面作为查询参数传递的是字符串类型，而不是其他任何东西。这意味着您不能通过查询参数发送数组。 您应该将所有参数更改为字符串

   const someData: object = 
      param1: 'stringType',
      param2: 'stringType',
      ...
   
   this.$router.push( name: 'SomePage', params:  someData  )

而不是vux 的查询参数，您可以保存和数据类型并在您想要的任何地方使用它，在我的开头，我会更好，因为同时您可以自己管理传递的数据

关于你@MagnusTeekivi 您可以将其转换为字符串，然后才能使用它，就像这样

`this.$router.push( name: 'user', params:  userId.toString() )`