在 axios Post 之后 router.push ， Vuejs答案

【问题标题】：router.push after axios Post , Vuejs在 axios Post 之后 router.push ， Vuejs
【发布时间】：2020-02-26 12:31:53
【问题描述】：

我在发出发布请求后尝试重定向，我尝试了不同的方法，但到目前为止没有任何效果。

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

这是更新后的代码。带有 axios 表单组件，app.js 和 main.js

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

在我的 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;

【问题讨论】：

是否有控制台错误？你能显示你的路由器定义吗？
向我们展示您的 axios 代码。
我更新了帖子，控制台没有错误。
在push下方多了一个});

标签： vue.js vuejs2 axios

【解决方案1】：

您是否尝试重定向到相同的路线？

Vue 缓存组件，因为这样更快。

如果这是你的问题，你必须这样做：

<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 => {
    //
  });

【讨论】：