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

【问题标题】：Vue-Router with Queries (from Firebase API)带查询的 Vue-Router（来自 Firebase API）
【发布时间】：2018-02-09 16:21:41
【问题描述】：

Firebase API 强制我为 verifyEmail 和 resetPassword 使用以下链接结构：

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 个不同条目中，这些条目链接到 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
},

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

非常感谢

【问题讨论】：

标签： firebase vue.js vuejs2 vue-router

【解决方案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

完整的例子在这里

【讨论】：