javascript - Use Regex in Vue Router Paths - Stack Overflow

admin管理员组

文章数量:1202374

I am creating a VueJS app which heavily uses the vue router.

Here's the structure of my 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 },
    ]},
]

I want to use regex in second child component i.e. poetrycard such that it only accepts the params(:id) which is a number. I am doing this because poetrysearch gets affected as /search is treated as :id!

I tried:

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

But this doesn't work. Please help.

I am creating a VueJS app which heavily uses the vue router.

Here's the structure of my 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 },
    ]},
]

I want to use regex in second child component i.e. poetrycard such that it only accepts the params(:id) which is a number. I am doing this because poetrysearch gets affected as /search is treated as :id!

I tried:

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

But this doesn't work. Please help.

• javascript
• vue.js
• vue-router

Share Improve this question Follow edited Jul 12, 2018 at 9:57 Axel asked Jul 12, 2018 at 9:48 AxelAxel 5,1111818 gold badges7575 silver badges146146 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 23

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.

So change your route definition as follows:

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

Reference- Advanced Matching patterns

本文标签： javascriptUse Regex in Vue Router PathsStack Overflow