如何向 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 测试它。

这里的 'trick' 不是整数的特殊情况，它们通过将点设为可选来自动匹配。这摆脱了路径中的一些特殊符号，从而减少了与 path-to-regexp.

的疯狂冲突的余地

原回答：

我使用 Express Route Tester 做了一些实验，我相信它使用的是与 Vue-Router/Nuxt:

相同的 path-to-regexp 库

这似乎对我有用：

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

变化：

删除了多余的正斜杠。
删除了点前的反斜杠。
将 * 更改为 {0,}，否则它会转换为 .*，并且 12xxx.34 之类的内容将匹配。
将 [0-9] 更改为 \d。两者都可以，如果你不得不将它写成一个字符串，使用 [0-9] 来避免斜杠转义可能更容易。无论您选择哪个，都要保持一致。

How to add float validation to Vue Routers paths?