typescript - Vue + Typescript vue-router 和参数类型

标签 typescript parameters vue-router

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

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'类型?

最佳答案

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

   const someData: object = {
      param1: 'stringType',
      param2: 'stringType',
      ...
   }
   this.$router.push({ name: 'SomePage', params: { someData } })
代替 vux 的查询参数你可以保存和数据类型并在你想要的任何地方使用它,在我的开场白中,我会好得多,因为同时你可以自己管理传递的数据
关于你@MagnusTeekivi
您可以在使用它之后将其转换为字符串,就像这样
`this.$router.push({ name: 'user', params: { userId.toString() })`

关于typescript - Vue + Typescript vue-router 和参数类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59846170/

相关文章:

grails - Grails-如何从 Controller 中删除多个参数

c# - 如何通过 ADO.NET/C# 将数组/表参数用于 Oracle (ODP.NET 10g)?

Laravel Vue js spa 应用程序

vue.js - 每当页面更改时显示微调器(预加载器/加载指示器)并在 Vue Gridsome 中加载所有 Assets 时隐藏

typescript - 如何扩展 TypeScript 接口(interface)并推断参数?

node.js - Typescript 中返回点不一致是什么意思

visual-studio-2012 - 为各种 Typescript 输入文件自定义特定的输出文件

reactjs - 什么是 RouteComponentProps?

c# - 查找 POST 参数

javascript - 为什么我的 vue-router 链接偶尔会导致错误页面(或根本不起作用)?