出于某种原因,我无法让 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
如果有人知道如何解决此问题,请告诉我!
最佳答案
更新:
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+))
变化:
- 删除了多余的正斜杠。
- 删除了点前的反斜杠。
- 将
*
更改为{0,}
,否则它会转换为.*
以及12xxx.34
将匹配。 - 将
[0-9]
更改为\d
。两者都可以,如果您必须将其写为字符串,则使用[0-9]
来避免斜杠转义可能会更容易。无论您选择哪一个,都要保持一致。
关于javascript - 如何向 Vue 路由器路径添加 float 验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60104296/