Vue Router：如何将参数转换为整数而不是字符串？

Question

当我使用浏览器字段输入 URL 时，参数被转换为字符串，而不是整数，例如 /user/1 返回 {id: "1"} 。但是，当使用 this.$route.push({}) 时，参数正确地转换为整数 {id: 1} 。

这种行为是故意的吗？如果没有，我该如何解决？

原文由 Fredrik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须自己处理投射任何参数值。在路由对象中定义一个 props 函数。这是一个例子：

 {
  path: '/user/:userId',
  component: UserProfile,
  props: (route) => {
    const userId = Number.parseInt(route.params.userId, 10)
    if (Number.isNaN(userId)) {
      return 0
    }
    return { userId }
  }
}

链接 到 vue router docs 这是在功能模式下

原文由 Nicholas Marshall 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我可能迟到了，但这是我对此的看法。我编写了一个函数，该函数返回一个函数，该函数将路由参数值转换为与给定类型具有相同名称的道具。

 function paramsToPropsCaster(mapping) {
  return function(route) {
    let nameType = Object.entries(mapping);  // [[param1, Number], [param2, String]]
    let nameRouteParam = nameType.map(([name, fn]) => [name, fn(route.params[name])]);  // [[param1, 1], [param2, "hello"]]
    let props = Object.fromEntries(nameRouteParam);  // {param1: 1, param2: "hello"}
    return props;
  }
}

然后，在您的路线定义中：

 {
      path: '/projects/:param1/editor/:param2',
      component: ProjectEditor,
      name: 'project-editor',
      props: paramsToPropsCaster({'param1': Number, 'param2': String}),
}

这只是一个提示，说明您可以如何解决此处提出的问题，不要逐字使用！

原文由 pongi 发布，翻译遵循 CC BY-SA 4.0 许可协议