javascript - 在 Vue 路由器路径中使用正则表达式

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 uses path-to-regexp as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns.

所以改变你的路由定义如下:

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

引用- Advanced Matching patterns