Can't assign route to popup dialog in vue.js

Question

I'm trying to assign a route to a custom popup I made using the dialog component in vue.js but I'm having some trouble getting it to work. I've messed up a lot and I'm honestly confused as to how to make this work. This is my route file:

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

I have a login page and within that login page I am using the RegistrationForm component which is contained within a custom dialog component I made like this:

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

I only want to assign a route to the popup when the user clicks on it. So when the user clicks the register button and the popup is activated, I want it to be http://localhost:5173/register instead of now having no route as it is just http://localhost:5173. I'm sorry if this is a confusing question, please try your best to explain it, thanks in advance!

Answer 1

You should handle redirection inside some methods, for example:

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