无法为vue.js中的弹出对话框分配路由

Question

我正在尝试为使用vue.js中的对话框组件的自定义弹出分配一条路由，但我在使其工作时遇到了一些小问题。我经常乱七八糟，老实说，我对如何使这件事发挥作用感到很困惑。这是我的路线文件：

routes: [
    {
      path: "/",
      name: "landing",
      component: LandingView,
      children: [
        {
          path: "/register",
          component: RegistrationForm,
        },
      ],
    },

我有一个登陆页面，在那个登陆页面中，我使用的是RegistrationForm组件，它封装在我制作的自定义Dialog组件中，如下所示：

    <teleport to="body">
      <dialog-modal v-if="isOpenRegister" @close="isOpenRegister = false">
        <RegistrationForm
          @open-login="(isOpenRegister = false), (isOpenLogin = true)"
          @close-dialog="isOpenRegister = false"
        />
      </dialog-modal>
    </teleport>

当用户点击这个弹出窗口时，我只想给它分配一个路径。因此，现在没有路由，因为它只是http://localhost:5173，我希望它是http://localhost:5173/register，当用户单击注册按钮，弹出窗口被激活。如果这是个令人困惑的问题，我很抱歉，我已经尽力解释了，谢谢！

Answer 1

应该在某些方法中处理重定向，例如：

<teleport to="body">
  <dialog-modal v-if="isOpenRegister" @close="isOpenRegister = false">
    <RegistrationForm
      @open-login="openRegister"
      @close-dialog="isOpenRegister = false"
    />
  </dialog-modal>
</teleport>

<script>
 methods: {
   openRegister() {
     this.$router.push({ path: '/register' })
     // other method logic
   }
 }
</script>