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

Question

在Vue文档的传递路由组件参数部分，他们解释了如何从位置路径中传递参数到组件，并将props声明为数组。但在样式指南中，他们提到最好定义props（至少）其数据类型。

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

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

- Digital Ninja

Answer 1

你可以创建一个返回props的函数。这样可以将参数转换为其他类型，将静态值与基于路由的值组合等。

参考：Reference。

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

- Andrew Vasylchuk

---

我尝试使用 this.route.params.id 在我的组件中获取它，但我得到了一个字符串，是我漏掉了什么东西吗？ - Yukulélé