router.push after axios Post , Vuejs

Question

I try a redirect after a post request is made, and I tried different things but nothing worked till now.

self.$router.push('/record')
Vue.$router.push('/record')
this.$router.push({ name: 'Record' })

Here is the updated code. with axios form component, app.js and main.js

axios.delete('/record/' + this.id)
.then((response) => {
    this.$router.push('/record')
    });
})
.catch(error => {
    //
});

In my app.js

import VueRouter from "vue-router";
import router from "./router";

Vue.use(VueRouter);

new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Record from './components/AddPerson';

Vue.use(VueRouter);

const routes = [
    {
        path: "/record",
        name: "Record",
        component: Record,
    },
];


const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

export default router;

Is there a console error? Can you show your router definitions? — Dan

Gabriel Willemann Gabriel Willemann · Accepted Answer · 2020-02-26T13:04:41

Do you trying to redirect to the same route?

The Vue cache the components, because this is more fast.

If this is your problem, you must do something like this:

<template>
  <v-app>
    <router-view :key="$route.fullPath" />
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

axios
  .delete(`/record/${this.id}`)
  .then(response => {
    this.$router.push({
      name: 'Record',
      query: { x: new Date().toISOString() },
    });
  })
  .catch(error => {
    //
  });

router.push after axios Post , Vuejs

1 Answers