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.

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.

So change your route definition as follows:

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

Reference- Advanced Matching patterns