Vue Router实现维基百科式URL：如何正确转义冒号？

要实现维基百科的URL格式（带命名空间的/Namespace:PageName和不带的/PageName），核心是用自定义正则表达式修正路由参数的匹配规则，避免默认匹配逻辑的异常。

直接可行的路由配置 #

按顺序定义两个路由规则（带命名空间的规则必须放在前面，因为Vue Router是从上到下匹配的）：

const routes = [
  // 匹配带命名空间的 URL：/[Namespace]:[PageName]
  {
    path: '/:namespace([^:]+):pagename',
    component: PageComponent, // 替换成你的页面组件
    props: route => ({
      namespace: route.params.namespace,
      pageName: route.params.pagename
    })
  },
  // 匹配不带命名空间的 URL：/[PageName]
  {
    path: '/:pagename',
    component: PageComponent,
    props: route => ({
      namespace: '',
      pageName: route.params.pagename
    })
  }
]

关键逻辑说明 #

• 第一个路由中，/:namespace([^:]+)的[^:]+是自定义正则，强制namespace参数匹配除冒号外的所有字符，彻底解决之前只匹配单个字符的问题。
• 字面量冒号:作为命名空间和页面名称的分隔符，之后的pagename参数会捕获冒号后的所有内容。
• 第二个路由处理无冒号的路径，直接将namespace设为空字符串，pagename取完整路径内容。

测试验证 #

• 访问/hi:bye：匹配第一个规则，namespace为hi，pageName为bye。
• 访问/randompage：匹配第二个规则，namespace为空，pageName为randompage。

内容的提问来源于stack exchange，提问作者Aurora