删除后 Nuxt js 路由器推送不工作

Question

我用 Nuxt 创建了一个简单的 CRUD。数据由 Lumen 提供。我遇到了 DELETE 问题，数据被删除但 Nuxt 没有重定向到其他页面。

这是我的脚本：

<script>
export default {
  name: 'EmployeePage',
  data() {
    return {
      fields: ['name','email','image','address'],
      emplyees:[],
    }
  },
  mounted() {
    this.$axios.get('/employee').then(response => {
      this.pegawais = response.data.data
    }).catch(error => {
      console.log(error.response.data)
    })
  },
  methods: {
    async delete(id) {
      await this.$axios.delete(`/employee/${id}`).then(response => {
        this.$router.push({ name: 'employee' })   <-----this redirect not working
      })
    }
  }
}
</script>

我想让Nuxt重定向到显示删除后所有数据的员工页面。

Answer 1

您不应混合使用 async/await 和 .then。使用第一种方法，这样你就不会遇到 .then 回调地狱，而且整体上会更干净。

像这样

<script>
export default {
  name: 'EmployeePage',
  data() {
    return {
      fields: ['name', 'email', 'image', 'address'],
      emplyees: [],
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/employee')
      this.pegawais = response.data.data
    } catch (error) {
      console.log(error.response.data)
    }
  },
  methods: {
    async delete(id) {
      await this.$axios.delete(`/employee/${id}`)
      await this.$router.push({ name: 'employee' })
    },
  },
}
</script>

await this.$router.push 不需要 await 但它也是一个 Promise，所以我这样写它以防你之后需要调用其他东西。

this.$axios.$get('/employee') 也可以用于删除 .data 又名 this.pegawais = response.data 作为 shown here.

删除后 Nuxt js 路由器推送不工作

Nuxt js Router Push Not Working After Delete

vue.js

axios

nuxt.js