vue-router路径正则排除指定单词不生效该如何解决？

问题原因 #

你当前使用的负向先行断言仅实现了排除逻辑的声明，没有补充路径参数的实际匹配规则，同时缺少结束匹配标记，所以排除规则没有生效。

正确路由配置 #

{ 
    path: '/:pageIdentifier(?!(word1|some-word2|word3)$)[^/]+', 
    name: 'SomePage', 
    component: () => import('@/views/index'), 
    props: true, 
}

规则说明 #

• 断言部分(?!(word1|some-word2|word3)$)：末尾添加的$确保只有当路径参数完全等于你指定的排除词时才会被拦截，不会误杀包含排除词的合法路径，比如/word123这类路径不会被拦截
• 匹配部分[^/]+：匹配除路径分隔符/之外的1个及以上任意字符，作为动态参数pageIdentifier的实际取值
• 注意修正参数拼写：原配置中参数名pageIdenfifier存在拼写错误，修正为pageIdentifier避免props接收参数时出现异常

额外注意事项 #

vue-router按照路由定义的顺序执行匹配，先定义的路由优先级更高。如果你有对应排除词的单独路由（比如/word1专属页面），需要将这些路由放在本动态路由之前定义，避免被本路由提前拦截。

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