使 Vue.js 路由器仅匹配数字 [重复]答案

【问题标题】：Make Vue.js router to match only numbers [duplicate]使 Vue.js 路由器仅匹配数字 [重复]
【发布时间】：2020-04-20 17:04:25
【问题描述】：

如何使 vue.js 的路由器只匹配数字？例如，如果我设置了一条路线

{
    path: "/:id",
    name: "RouteName",
    component: SomeComponent,
    props: true
}

如何使它只匹配 localhost:8080/983 和 localhost:8080/239 之类的 url，而不匹配 localhost:8080/nan 和 localhost:8080/string 之类的 url？

编辑：我尝试使用正则表达式，但它不起作用，所以我想要正则表达式以外的东西。

【问题讨论】：

您可以为您的路线使用某种正则表达式。查看this post
Use Regex in Vue Router Paths 的完全相同的副本
@NinoFiliu 我尝试过使用正则表达式，但没有成功。

标签： javascript vue.js vue-router

【解决方案1】：

试试这个。

{
      path: '/user/:id',
      name: "RouteName",
      component: SomeComponent,
      props: (route) => {
        const id= Number.parseInt(route.params.id, 10)
        if (Number.isNaN(id)) {
          return 0
        }
        return { id }
      }
    }

【讨论】：