在Vue路由器路径中使用Regex

Question

我正在创建一个大量使用vue路由器的VueJS应用程序.

这是我的结构routes.js:

export const routes = [
    { path: '', component: Poetry, children: [
        { path: '', name: 'poetry', component: PoetryLanding },
        { path: 'poetry/:id', name: 'poetrycard', component: PoetryCard },
        { path: 'poetry/search', name: 'poetrysearch', component: PoetrySearch },
    ]},
]

我想在第二个子组件中使用正则表达式,即poetrycard它只接受作为数字的params(:id).我这样做是因为poetrysearch被/search视为受到影响:id!

我试过了:

{ path: 'poetry/:id/[0-9]/g', name: 'poetrycard', component: PoetryCard }

但这不起作用.请帮忙.

Answer 1

vue-router使用path-to-regexp作为其路径匹配引擎,因此它支持许多高级匹配模式,例如可选动态段,零个或多个/一个或多个要求,甚至自定义正则表达式模式.

因此,请按如下方式更改路径定义:

{ path: 'poetry/:id(\\d+)', name: 'poetrycard', component: PoetryCard }

参考 - 高级匹配模式