vue.js - 如何将路由参数作为数字传递？

Question

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

如果我要听风格指南，如果我希望我的 URL 定义他们想要引用的实体的 ID(例如 /user/99)，那么我将如何将该参数作为数字传递，并避免控制台错误告诉我它需要一个数字，但得到了一个字符串？没有这方面的例子。

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

Answer 1

You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, etc.

Reference .

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