javascript - 如何向 Vue 路由器路径添加 float 验证？

Question

出于某种原因，我无法让 float 在 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... 左右。它引入它的确切方式很复杂，但我相信 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] 来避免斜杠转义可能会更容易。无论您选择哪一个，都要保持一致。