如何将浮动验证添加到 Vue 路由器路径？

Question

由于某种原因，我无法在 vue 路由器路径中使用浮点数。

/category/:category(\d+)/:post([-+]?([0-9]*\.[0-9]+|[0-9]+))

我有要处理的数字 :category(\d+)
但由于某种原因，这样的正则表达式不起作用 :post([-+]?([0-9]*.[0-9]+|[0-9]+))

每当我使用 javascript 对其进行测试时，它都能正常工作。但是当我把它放在上面的路径中时它不起作用。

/[-+]?([0-9]*\.[0-9]+|[0-9]+)/.test(6.5) // MATCHES  /category/196/6.5
/[-+]?([0-9]*\.[0-9]+|[0-9]+)/.test(6) // MATCHES /category/196/6

我想匹配的数字：

10
65.5
.55

如果有人知道如何解决这个问题，请告诉我！

Answer 1

更新：

Vue Router 使用的path-to-regexp 的版本是1.7.0... ish。将其拉入的确切方式很复杂，但我相信 1.7.0 提供了最佳匹配。

考虑到这一点，我想出了这个：

path: '/category/:category([0-9]+)/:post([-+]?[0-9]*\\.?[0-9]+)',

这与我最初的答案有点不同，但如果您将版本更改为 1.7.0，也可以使用我提到的测试站点进行测试。

我已经用 Vue Router 对此进行了测试，它似乎对我有用。我没有用 Nuxt 测试过。

这里的“技巧”是它不会为整数设置特殊情况，它们会通过使点成为可选来自动匹配。这消除了路径中的一些特殊符号，使其与path-to-regexp 的疯狂发生冲突的空间更小。

原答案：

我使用 Express Route Tester 做了一些试验，我相信它使用与 Vue-Router/Nuxt 相同的 path-to-regexp 库：

https://forbeslindesay.github.io/express-route-tester/

这似乎对我有用：

/category/:category(\d+)/:post([-+]?(\d{0,}.\d+|\d+))

变化：

1. 删除了多余的正斜杠。
2. 删除了点之前的反斜杠。
3. 将* 更改为{0,}，否则将转换为.* 和12xxx.34 之类的内容将匹配。
4. 将[0-9] 更改为\d。两者都可以，如果您必须将其编写为字符串，则使用[0-9] 来躲避斜线转义可能更容易。无论您选择哪个，都要保持一致。