Question

我正在使用Firebase进行用户身份验证。除了登录/注册流程外，还有3个称为email actions的流程-其中包括重置密码，恢复电子邮件和验证电子邮件。

您可以自定义Firebase调用您的URL，但是对于所有操作，它都具有相同的URL，而实际操作则作为查询参数传递。这是一个示例：

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

我的问题-如何使用Vue路由器基于mode查询参数加载不同的组件？我知道我可以创建一个组件，该组件将根据查询参数动态加载其他3个组件中的一个，但是我正在寻找一种更简洁的方法。

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

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

编辑：现在我有一个具有此配置的路由器：

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

然后，在EmailActions内，我必须根据mode道具动态显示3个组件之一。该文件确实是多余的，因为它仅包含路由代码。我真正想做的是在路由器配置中执行以下操作：

  {
    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')
      }
    ]
  }

如何根据查询参数路由到Vue路由器中的不同组件

0 个答案: