[Vuejs]-How can i pull form values to another page

As @kissu, mentioned On SignUp page, you can use $router to route to the verifyCode page with query equal to email

router.push({ name: "verifyCode", query: { email: values.email } });

And in VerifyCode page you can get the query value with

const route = useRoute();
//log the email value.
console.log(route.query.email)

FULL EXAMPLE OF CODE.

VerifyCode.vue

<template>
    <Form
      @submit="onVerifyCode"
      id="kt_verifyCode_form"
    >
      <div class="fv-row mb-7">
        <label class="form-label fw-bold text-dark fs-6">Code</label>
        <Field
          class="form-control form-control-lg"
          type="text"
          name="code"
          autocomplete="off"
          v-model="code"
        />
      </div>
      <div class="text-center">
        <button
          id="kt_verifyCode_submit"
          ref="submitButton"
          type="submit"
          class="btn btn-lg btn-primary mt-4"
        >
          <span class="indicator-label"> Submit </span>
        </button>
      </div>
    </Form>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "verifyCode",
  data() {
    return {
      code: "",
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    // log the email value.
    console.log(router.query.email)
    const onVerifyCode = async (values) => {
      // Clear existing errors
      store.dispatch(Actions.LOGOUT);

      // eslint-disable-next-line
      submitButton.value!.disabled = true;

      // Activate indicator
      submitButton.value?.setAttribute("data-kt-indicator", "on");
      const data = {
        code: values.code,
      };
      // Send verify code request
      await store.dispatch(Actions.VERIFY_CODE, data);
      const [errorName] = Object.keys(store.getters.getErrors);
      const error = store.getters.getErrors[errorName];

      if (!error) {.then(function () {
          // Go to page after successfully login
          router.push({ name: "projects" });
        });
      } else {}

      submitButton.value?.removeAttribute("data-kt-indicator");
      // eslint-disable-next-line
      submitButton.value!.disabled = false;
    };

    return {
      verifyCode,
      onVerifyCode,
      submitButton,
    };
  },
});
</script>

SignUp.vue

    <template>
        <Form
          @submit="onSubmitRegister"
          id="kt_login_signup_form"
        >
          <!--begin::Input group-->
          <div class="row fv-row mb-7">
            <!--begin::Col-->
            <div class="col-xl-6">
              <label class="form-label fw-bold text-dark fs-6">First Name</label>
              <Field
                class="form-control form-control-lg"
                type="text"
                placeholder=""
                name="givenName"
                autocomplete="off"
                v-model="givenName"
              />
            </div>
            <!--end::Col-->
    
            <!--begin::Col-->
            <div class="col-xl-6">
              <label class="form-label fw-bold text-dark fs-6">Last Name</label>
              <Field
                class="form-control form-control-lg"
                type="text"
                placeholder=""
                name="familyName"
                autocomplete="off"
                v-model="familyName"
              />
            </div>
            <!--end::Col-->
          </div>
          <!--end::Input group-->
          <!--begin::Input group-->
          <div class="fv-row mb-7">
            <label class="form-label fw-bold text-dark fs-6">Company</label>
            <Field
              class="form-control form-control-lg"
              type="text"
              placeholder=""
              name="companyName"
              autocomplete="off"
              v-model="companyName"
            />
          </div>
          <!--end::Input group-->
          <!--begin::Input group-->
          <div class="fv-row mb-7">
            <label class="form-label fw-bold text-dark fs-6">Email</label>
            <Field
              class="form-control form-control-lg"
              type="email"
              placeholder=""
              name="email"
              autocomplete="off"
              v-model="email"
            />
          </div>
          <!--end::Input group-->
    
          <!--begin::Input group-->
          <div class="mb-10 fv-row" data-kt-password-meter="true">
            <!--begin::Wrapper-->
            <div class="mb-1">
              <!--begin::Label-->
              <label class="form-label fw-bold text-dark fs-6"> Password </label>
              <!--end::Label-->
    
              <!--begin::Input wrapper-->
              <div class="position-relative mb-3">
                <Field
                  class="form-control form-control-lg"
                  type="password"
                  placeholder=""
                  name="password"
                  autocomplete="off"
                  v-model="password"
                />
              </div>
              <!--end::Input wrapper-->
            </div>
            <!--end::Wrapper-->
          </div>
          <!--end::Input group--->
    
          <!--begin::Input group-->
          <div class="fv-row mb-5">
            <label class="form-label fw-bold text-dark fs-6"
              >Confirm Password</label
            >
            <Field
              class="form-control form-control-lg"
              type="password"
              placeholder=""
              name="password_confirmation"
              autocomplete="off"
              v-model="password_confirmation"
            />
          </div>
          <!--end::Input group-->
    
          <!--begin::Actions-->
          <div class="text-center">
            <button
              id="kt_sign_up_submit"
              ref="submitButton"
              type="submit"
              class="btn btn-lg btn-primary mt-4"
            >
              <span class="indicator-label"> Submit </span>
            </button>
          </div>
        </Form>
      </div>
    </template>

<script lang="ts">
export default defineComponent({
  name: "sign-up",
  data() {
    return {
      givenName: "",
      familyName: "",
      companyName: "",
      email: "",
      password: "",
      password_confirmation: "",
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();

    const submitButton = ref<HTMLButtonElement | null>(null);

    const onSubmitRegister = async (values) => {
      // Clear existing errors
      store.dispatch(Actions.LOGOUT);

      // eslint-disable-next-line
      submitButton.value!.disabled = true;

      // Activate indicator
      submitButton.value?.setAttribute("data-kt-indicator", "on");
      const data = {
        givenName: values.givenName,
        familyName: values.familyName,
        companyName: values.companyName,
        email: values.email,
        password: values.password,
        confirmPassword: values.confirmPassword,
      };
      // Send login request
      await store.dispatch(Actions.REGISTER, data);

      const [errorName] = Object.keys(store.getters.getErrors);
      const error = store.getters.getErrors[errorName];

      if (!error) {
     .then(function () {
          // Go to page after successfully register
          router.push({ name: "verifyCode", query: { email: values.email } });
        });
      } else {}

      submitButton.value?.removeAttribute("data-kt-indicator");
      // eslint-disable-next-line
      submitButton.value!.disabled = false;
    };

    return {
      registration,
      onSubmitRegister,
      submitButton,
    };
  },
});
</script>