Vue-Router with Queries (from Firebase API)

Question

Firebase API forces me to use following link sctructure for verifyEmail and resetPassword:

http://www.example.com/action?mode=verifyEmail?code=123
http://www.example.com/action?mode=resetPassword?code=123

Only " http://www.example.com/action " is replaceable. My problem here is that I try to integrate this in my Vue Router in 2 different entries which links to 2 different components.

I tried this, but the page is blank than for both.

{
    path: '/action?mode=verifyEmail',
    name: 'VerifyEmail',
    component: VerifyEmail
},
{
    path: '/action?mode=resetPassword',
    name: 'Reset Password',
    component: ResetPassword
},

For example, if I do it like that, then it works (but only for the one I call):

{
    path: '/auth',
    name: 'Reset Password',
    component: ResetPassword
},

Of course I could do it like this and then I can manage this in the component I call, but it's more clean to handle this in routes (if possible).

Thank you very much

Answer 1

vue-router uses path-to-regexp as its path matching engine, so the query is not avaliable.

I suggest you can use dynamic redirecting,

{
  path: '/firebase/handle',
  redirect: (to) => {
    if (to.query.mode === 'verifyEmail') {
      return '/firebase/verify-email'
    } else if (to.query.mode === 'resetPassword') {
      return '/firebase/reset-password'
    } else {
      return '/'
    }
  }
},
{
  path: '/firebase/verify-email',
  name: 'VerifyEmail',
  component: VerifyEmail
},
{
  path: '/firebase/reset-password',
  name: 'ResetPassword',
  component: ResetPassword
}

so /firebase/handle?mode=verifyEmail&code=123 will redirect to /firebase/verify-email?mode=verifyEmail&code=123

full example is here