How redirect to another page with post data in Vue?

Question

How make redirect to another page with post data like php form?

<button @click="sendData(foo)">Submit</button>

------------------------------
sendData(foo){

 //redirect to another page with post data $_POST['foo'] 

 ....

}

Can create in JS form with input. Check here: https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit — Eduard Brokan, Feb 26 '20 at 08:34
Check this: https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit — Eduard Brokan, Feb 26 '20 at 09:17

score 5 · Accepted Answer · answered Nov 20 '17 at 13:10

sendData(foo){

 axios.post('/a_url.php', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
    //REDIRECT TERE
  })
  .catch(function (error) {
    console.log(error);
  });

}

Notice that this won't redirect, since you're using AJAX, but it will submit the form using post.

To redirect, you will have to tell me how your setup is done, if you have something like vue router you should use something similar to:

router.go('/some_url.php')

Otherwise you may need:

location.href = '/some_url.php';

This two would go inside your success function.

What if the response of the post request is a html page and I want to move to that html page? — Shafi, Jul 02 '18 at 12:42

score 3 · Answer 2 · answered Aug 30 '19 at 08:59

This comes in very handy in situations where you need to redirect to an external site e.g payment checkout etc

axios.post(this.baseUrl, this.data)
.then(function (response) {
    window.location = response.data.redirect; // full URI to redirect to
})
.catch(function (error) {

});

How redirect to another page with post data in Vue?

2 Answers2