Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When I use '()' in path regex of router config, it doesn't work #3040

Closed
doubleKGe opened this issue Nov 27, 2019 · 2 comments
Closed

When I use '()' in path regex of router config, it doesn't work #3040

doubleKGe opened this issue Nov 27, 2019 · 2 comments

Comments

@doubleKGe
Copy link

@doubleKGe doubleKGe commented Nov 27, 2019

Version

3.1.3

Reproduction link

https://codesandbox.io/s/vue-template-nq4gk

Steps to reproduce

I came across a scenario that required custom matching named parameter rules,so I tried it:

const routes: RouteConfig[] = [
    {
        path: '',
        component: load('main/layout'),
        children: [
            { path: ':a((a)?bc)?', component: load('main/content') }
        ]
    },
    { path: '*', component: load('Error404') }
]

but it doesn't work
so I went to ask the author of path-to-regexp: pillarjs/path-to-regexp#211
And I did it his way:

const routes: RouteConfig[] = [
    {
        path: '',
        component: load('main/layout'),
        children: [
            { path: ':a((?:a)?bc)?', component: load('main/content') }
        ]
    },
    { path: '*', component: load('Error404') }
]

but it still bad ,and throw an error

Invalid regular expression: /^\/((?:[^\/] ?))\((?:((?:?\:a)))?bc\)(?:\/(?=$))?$/: Nothing to repeat

I know it works without '()' of 'a', but this is just a simple example, I need use '()' in my actual work, how do I solve it . Thanks!

What is expected?

I want the route to match '/' or '/abc' or '/bc'

What is actually happening?

It doesn't match, and it's an error

@doubleKGe

This comment has been minimized.

Copy link
Author

@doubleKGe doubleKGe commented Nov 27, 2019

I tried the second way in path-to-regexp alone, and it worked, but vue-router didn't parse properly

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Nov 27, 2019

It seems like this problem was fixed in later versions of path-to-regexp but not in the one used by vue-router. It won't be a problem on future versions of vue-router as they use a newer version of the package but this one doesn't as upgrading implies a few breaking changes. This will be a wontfix for vue-router 3

A workaround is to use the | to create multiple possibilities: /foo/:a(abc|bc)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.