在 VUE JS 中使用表单提交重定向到不同的页面

Question

I am trying to submit form which will redirect to different page containing post request data . Basically I hit redirectCompo component from another component

return this.$router.push({path: '/form-submit-component'});

form submit component but it's not redirecting

<template>
<div style="visibility: hidden;">
    <form name="PostForm" id="PostForm" method="POST" action="www.google.com">
        <input type="text" name="email_id" value="xyz@gmail.com">
        <input type="text" name="gender" value="male">
    </form>
</div>
</template>

<script>

export default {
name: 'redirectCompo',
computed: {},
components: {},
data: function () {
    return {}
},
mounted() { },
created() {
    document.getElementById("PostForm").submit();
},
methods: {},
}
</script>

Answer 1

<template>
  <div>
    <form name="PostForm" id="PostForm" method="POST" action="www.google.com">
      <input type="text" name="email_id" value="xyz@gmail.com" />
      <input type="text" name="gender" value="male" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "redirectCompo",
  computed: {},

  components: {},
  created() {
    this.submit();
  },
  methods: {
    submit() {
      console.log("form has been submitted");
      this.$router.push({ path: "/home" });
    },
  },
  data: function () {
    return {};
  },
};
</script>