Vue路由器-如何添加自定义后缀到路由参数

Question

我有这个路由路径

/custom/:length(\d+-letter-)?words

它符合预期的以下路线✅

/custom/3-letter-words
/custom/words

然而，这一点$route.params.length返回3个字母-。

我的期望是这一点$route.params.length将返回3，因此我输入的路由路径将与上面的两条路由匹配。

在这种情况下，我应该如何更改上面的路由路径？如果你认为改变路线是行不通的，你还有其他建议吗？

Answer 1

您可以尝试

path: "/custom/:length(\d+)?-letter-words",
alias: "/custom/words"

其将输出长度的正确值，但这也将匹配/custom/-letter-words。

不幸的是，你不能将:length(?:(\d+)-letter-)?与vue路由器一起使用，它无法正确解析它。

另一种选择是在功能模式下使用道具：

props: (route) => ({
letterCount: route.params.length ?
route.params.length.match(/^d+/)[0] :
null
})

Answer 2

Vue路由器使用路径到正则表达式库进行路径匹配，该库实际上支持自定义前缀和后缀：https://github.com/pillarjs/path-to-regexp#custom-前缀和后缀

这里的问题是vue路由器使用的这个库的版本是旧的(v1.8.0(，这个版本不支持这个功能。vue路由器上有一个悬而未决的问题，但他们表示不会这么做，因为新版本中有一个突破性的变化。

因此，通过构建路径似乎不可能做到这一点。当然，由于无法应用最佳实践方法，可能会有不同的替代想法，但我个人更喜欢在解析route.param.时获得变量