带查询的Vue-Router（来自Firebase API）

Question

Firebase API强制我使用以下链接sctructure进行verifyEmail和resetPassword：

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

仅限＆＃34; http://www.example.com/action＆＃34;是可以替换的。我的问题是我尝试将它集成到我的Vue路由器中的2个不同的条目中，链接到2个不同的组件。

我尝试了这个，但页面是空白而不是两者。

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

例如，如果我这样做，那么它可以工作（但只适用于我打电话的那个）：

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

当然我可以这样做，然后我可以在我调用的组件中管理它，但是在路由中处理这个问题会更加干净（如果可能的话）。

非常感谢

Answer 1

vue-router使用path-to-regexp作为其路径匹配引擎，因此查询不可用。

我建议你可以使用动态重定向，

{
  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
}

因此/firebase/handle?mode=verifyEmail&code=123会重定向到/firebase/verify-email?mode=verifyEmail&code=123

完整的例子就在这里