Tidak dapat menetapkan laluan ke dialog timbul dalam vue.js

Question

Saya cuba menetapkan laluan kepada pop timbul tersuai yang saya buat menggunakan komponen dialog dalam vue.js tetapi saya menghadapi sedikit masalah untuk membuatnya berfungsi. Saya telah banyak kacau dan sejujurnya saya keliru tentang bagaimana untuk membuat kerja ini. Ini ialah fail laluan saya:

laluan: [
    {
      laluan: "/",
      nama: "mendarat",
      komponen: LandingView,
      kanak-kanak: [
        {
          laluan: "/daftar",
          komponen: Borang Pendaftaran,
        },
      ],
    },

Saya mempunyai halaman log masuk dan dalam halaman log masuk itu saya menggunakan komponen Borang Pendaftaran yang terkandung dalam komponen dialog tersuai yang saya buat seperti ini:

<teleport ke="badan">
      <dialog-modal v-if="isOpenRegister" @close="isOpenRegister = false">
        <Borang Pendaftaran
          @open-login="(isOpenRegister = palsu), (isOpenLogin = benar)"
          @close-dialog="isOpenRegister = false"
        />
      </dialog-modal>
    </teleport>

Saya hanya mahu menetapkan laluan ke pop timbul apabila pengguna mengklik padanya. Jadi apabila pengguna mengklik butang daftar dan pop timbul diaktifkan, saya mahu ia menjadi http://localhost:5173/register dan bukannya sekarang tidak mempunyai laluan kerana ia hanya http://localhost:5173. Saya minta maaf jika ini adalah soalan yang mengelirukan, sila cuba sedaya upaya untuk menerangkannya, terima kasih terlebih dahulu!

Answer 1

Anda harus mengendalikan ubah hala dalam beberapa kaedah, contohnya:

<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>