Firebase 如何基于查询参数路由到Vue路由器中的不同组件

我正在使用firebase进行用户身份验证。除了登录/注册流之外，还有3个流被称为：重置密码、恢复电子邮件和验证电子邮件

您可以自定义Firebase调用您的URL，但所有操作的URL必须相同，而实际操作作为查询参数传递。下面是一个例子：

https://example.com/usermgmt?mode=resetPassword&oobCode=ABC123&apiKey=AIzaSy...&lang=fr
//                          ^^^ from here on starts the dynamic part

我的问题-如何使用Vue路由器根据

模式

查询参数加载不同的组件？ 我知道我可以创建一个组件，根据查询参数动态加载其他3个组件中的一个，但我正在寻找一种更干净的方法

我试图寻找“基于查询参数的Vue路由器”，但只找到了如何将查询参数作为道具传递到组件中的示例

还寻找了在Vue中实现Firebase身份验证的示例，但所有示例都只关注登录和注册

编辑： 现在我有一个路由器，配置如下：

  {
    path: '/auth/actions',
    component: () => import('pages/EmailActions.vue'),
    props: (route) => {
      return {
        mode: route.query.mode
      }
    }
  }

然后，在

EmailActions

中，我必须基于

模式

道具动态显示三个组件中的一个。 这个文件实际上是多余的，因为它只包含路由代码。 我真正想做的是在路由器配置中这样做：

  {
    path: '/auth/actions',
    children:[
      {
        query: {mode: 'resetPassword'},
        component: () => import ('pages/ResetPassword.vue')
      },
      {
        query: {mode: 'recoverEmail'},
        component: () => import ('pages/RecoverEmail.vue')
      },
      {
        query: {mode: 'verifyEmail'},
        component: () => import ('pages/VerifyEmail.vue')
      }
    ]
  }

---

您可以这样写：“我知道我可以创建一个组件，该组件将根据查询参数动态加载其他3个组件中的一个。”。这种方法有什么问题？您是否需要其他建议，或者您不知道如何实现它？@RenaudTarnec这种方法（1）使用一些逻辑创建附加文件，并可能使用没有任何附加值的动态

，以及（2）提取router.js文件外的一些路由逻辑，因此我无法在一个位置看到所有路由。我可以接受，但如果可能的话，我会寻找更干净的方式。编辑问题以使其更清楚。你能分享你现有的代码并准确指出你想要更改的内容吗？@RenaudTarnec我已经添加了我当前的路由器配置和一个我想要实现的示例。我希望现在更清楚了，你可以写“我知道我可以创建一个组件，根据查询参数动态加载其他3个组件中的一个。”。这种方法有什么问题？您是否需要其他建议，或者您不知道如何实现它？@RenaudTarnec这种方法（1）使用一些逻辑创建附加文件，并可能使用没有任何附加值的动态

，以及（2）提取router.js文件外的一些路由逻辑，因此我无法在一个位置看到所有路由。我可以接受，但如果可能的话，我会寻找更干净的方式。编辑问题以使其更清楚。你能分享你现有的代码并准确指出你想要更改的内容吗？@RenaudTarnec我已经添加了我当前的路由器配置和一个我想要实现的示例。我希望现在更清楚了。