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

Question

Firebase API 强制我使用以下 link 结构来验证电子邮件和重置密码：

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

只有“http://www.example.com/action”是可替换的。我这里的问题是我尝试将它集成到我的 Vue 路由器中的 2 个不同的条目中，links 到 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

完整示例在这里

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

Vue-Router with Queries (from Firebase API)

firebase

vue.js

vue-router

vuejs2