首页 > 解决方案 > 在 axios Post 之后 router.push , Vuejs

问题描述

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

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");

路由器.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;

标签: vue.jsvuejs2axios

解决方案


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

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

推荐阅读