Use Regex in Vue Router Paths

Question

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.

Vamsi Krishna · Accepted Answer · 2018-07-12 10:11:57Z

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

edited Jul 12, 2018 at 10:11

answered Jul 12, 2018 at 10:02

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Axel Over a year ago

Thanks for the answer but it doesn't work! The page doesn't load at all.

Vamsi Krishna Over a year ago

@Sanjay can you try replacing the regex with \\d+

user10706046 Over a year ago

If anyone is wondering - this also applies to Vue Router aliases eg. {path: '/abc/:type?', alias: '/something-different/:type?'}

Collectives™ on Stack Overflow

Use Regex in Vue Router Paths

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related