Vue 路由和正则表达式模式

Question

我正在使用 Vue，最近引入了一个带参数的路由。

const routes = [
  {
    path: "/:lang(^$|^es$|^pt$|^cn$)",
    name: "Home",
    component: Page,
  },
  {
    path: "/privacy",
    name: "Privacy",
    component: Privacy,
  },
  {
    path: "*",
    name: "NotFound",
    component: NotFound,
  }
];

我希望在满足以下条件之一时触发路由。

1. lang 为 空
2. lang 是 es 或 pt 或 cn，但不能是它们的组合。

其他一切都应该去NotFound路线

我上面使用的正则表达式适用于https://regexplanet.com的javascript引擎

我尝试了各种变体以使其在 Vue 中工作，但到目前为止无济于事。

Answer 1

我相信你需要的路径是：

path: "/:lang(|es|pt|cn)",

这里有一个路由测试器，它使用与 Vue 相同的库：

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

确保您正在针对 path-to-regexp 0.1.7 进行测试。

问题是整个路径都被转换为正则表达式，而不仅仅是括号中的位。所以你的^ 永远不会匹配任何东西。尝试将您的原始路径放入测试工具中，看看它是如何编译的。生成的正则表达式已经包含了自己的^ 和$，但它们是相对于整个路径的，而不仅仅是你要匹配的参数。