Impossible d'attribuer un itinéraire à la boîte de dialogue contextuelle dans vue.js

Question

J'essaie d'attribuer un itinéraire à une fenêtre contextuelle personnalisée que j'ai créée à l'aide du composant de dialogue dans vue.js mais j'ai du mal à le faire fonctionner. J'ai beaucoup gâché et honnêtement, je ne sais pas comment faire en sorte que cela fonctionne. Voici mon fichier de route :

routes : [
    {
      chemin : "/",
      nom : "atterrissage",
      composant : LandingView,
      enfants: [
        {
          chemin : "/register",
          composant : Formulaire d'inscription,
        },
      ],
    },</pré>
<p>J'ai une page de connexion et dans cette page de connexion, j'utilise le composant RegistrationForm qui est contenu dans un composant de boîte de dialogue personnalisé que j'ai créé comme ceci : </p>
<pre class="brush:php;toolbar:false;"><téléporter vers="body">
      <dialog-modal v-if="isOpenRegister" @close="isOpenRegister = false">
        <Formulaire d'inscription
          @open-login="(isOpenRegister = false), (isOpenLogin = true)"
          @close-dialog="isOpenRegister = false"
        />
      </dialog-modal>
    </téléportation>

Je souhaite uniquement attribuer un itinéraire à la fenêtre contextuelle lorsque l'utilisateur clique dessus. Ainsi, lorsque l'utilisateur clique sur le bouton d'enregistrement et que la fenêtre contextuelle s'active, je veux que ce soit http://localhost:5173/register au lieu de n'avoir désormais aucune route car il s'agit simplement de http://localhost:5173. Je suis désolé si c'est une question déroutante, faites de votre mieux pour l'expliquer, merci d'avance !

Answer 1

Vous devez gérer la redirection à l'intérieur de certaines méthodes, par exemple :

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