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 }

参考资料-Advanced Matching patterns

在Vue路由器路径中使用Regex

1 个答案: