Vue Router - 基于固定列表的动态分段

Question

Dynamic segments 在 Vue Router 中以冒号开头：

{ path: '/user/:username', component: User }

但是，如果我只想匹配一组姓名，例如：Bob、John、Jane、Chris，该怎么办？我想配置如下：

{ path: '/user/:username(\Bob|John|Jane|Chris)', component: User }

我尝试使用内置的 path-to-regexp 路径匹配引擎来完成此操作，但没有成功。

Answer 1

该模式的前缀不正确 \（也许您认为转义序列是必要的）。

删除它以解决问题：

//{ path: '/user/:username(\Bob|John|Jane|Chris)', component: User } ❌
                           ^^

{ path: '/user/:username(Bob|John|Jane|Chris)', component: User } ✅

demo

Vue Router - 基于固定列表的动态分段

Vue Router - Dynamic segments based on a fixed list

vue.js

vue-router