如何将路由参数作为数字传递？

Question

在Vue文档的Passing Props to Route Components部分中，他们解释了如何将参数从位置路径传递到组件中，并且将props声明为数组。但是在Style guide中，他们提到最好让道具定义（至少）它们的数据类型。

如果我要听样式指南，并且如果我想让我的URL定义他们想要引用的实体的ID（例如/user/99），那么我将如何将该参数作为数字传递，并避免控制台错误告诉我它需要一个数字，但是得到一个字符串？没有任何例子。

在行{ path: '/user/:id', component: User, props: true }中，我需要一些额外的参数来指定id的类型为Numeric。但是到底如何呢？

Answer 1

  

您可以创建一个返回道具的函数。这使您可以投射   参数分为其他类型，将静态值与基于路由的参数组合   值等。

Reference。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: (route) => ({ id: Number(route.params.id) }) }
  ]
})