無法將路由指派給 vue.js 中的彈出對話框

Question

我正在嘗試將路由分配給我使用 vue.js 中的對話框元件製作的自訂彈出窗口，但在使其工作時遇到了一些麻煩。我已經搞砸了很多，老實說，我對如何完成這項工作感到困惑。這是我的路線文件：

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

我有一個登陸頁面，在該登陸頁面內，我正在使用 RegistrationForm 元件，該元件包含在我製作的自訂對話框元件內，如下所示：

<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/register，而不是現在沒有路由，因為它只是 http://localhost:5173。如果這是一個令人困惑的問題，我很抱歉，請盡力解釋它，提前致謝！

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>