在 this.$axios.post 之后重定向到另一个页面有问题答案

【问题标题】：After this.$axios.post there is a problem with redirecting to another page在 this.$axios.post 之后重定向到另一个页面有问题
【发布时间】：2021-01-11 09:31:55
【问题描述】：

发布后页面无法移动。

$axios.post 之后重定向到另一个页面时出现问题。

我的代码有问题吗？

<template>
  <v-form ref="form" v-model="valid" lazy-validation @submit="formSubmit">
    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs12 sm12 md5>
          <v-text-field v-model="nameMale" :counter="10" :rules="nameRules" label="Name Male" required box />
        </v-flex>
        <v-flex xs12>
          <v-text-field 
            v-model="placeAddress" 
            :rules="addressRules"
            label="Address" 
            required 
            box 
          />
        </v-flex>
      </v-layout>
      <v-layout row>
        <v-btn type="submit" :disabled="!valid" color="primary" @click="validate">
          POST
        </v-btn>
        <v-btn color="normal" to="./">
          LIST
        </v-btn>
      </v-layout>
    </v-container>
  </v-form>
</template>

<script>
export default {
  data: () => ({
    valid: true,
    nameMale: '',
    nameRules: [
      v => !!v || 'name',
    ],
    placeAddress: '',
  }),
  methods: {
    async formSubmit() {
      const data = {
        nameMale: this.nameMale,
        placeAddress: this.placeAddress,
      }
      const apiUrl = 'http://127.0.0.1:3100/post'
      await this.$axios
        .post(apiUrl, data)
        .then(response => {
          console.log(response)
          if (response.status === '200') {  //<<------ 200 Okay!
            this.$router.push('/list')      //<<------ Can't redirect
          }
        })
        .catch(error => {
          if (error.response) {
            console.log(error.response.data)
            console.log(error.response.status)
            console.log(error.response.headers)
          } else if (error.request) {
            console.log(error.request)
          } else {
            console.log('Error', error.message)
          }
          console.log(error.config)
        })
    },
    validate() {
      if (this.$refs.form.validate()) {
        this.snackbar = true
      }
    }
  }
}

这是我的包裹清单。

"dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/proxy": "^2.0.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "cross-env": "^5.2.0",
    "express": "^4.16.4",
    "moment": "^2.29.0",
    "nuxt": "^2.4.0",
    "vuetify": "^1.5.0",
    "vuetify-loader": "^1.2.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "babel-eslint": "^8.2.1",
    "eslint": "^5.0.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": ">=2.14.0",
    "eslint-plugin-jest": ">=21.24.1",
    "eslint-plugin-node": ">=7.0.1",
    "eslint-plugin-prettier": "2.6.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.0.0",
    "nodemon": "^1.18.9",
    "prettier": "1.14.3",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }

【问题讨论】：

标签： vue.js redirect post nuxt.js vue-router

【解决方案1】：

您正在使用异步等待，因此将您的等待包装在 try catch 中：

async method(){
 try {
  await function 
  this.$router.push()
 } catch {
  console.log(‘an error’)
}

【讨论】：

【解决方案2】：

有同样的问题。我认为问题是您不能在您的 axios 中引用 $this 或 $this.router。为了解决这个问题，在调用 axios 之前创建一个变量并在你的 axios 中使用该变量，像这样

var self = this;
var store = this.$store;
var router = this.$router;   --------------------- create var like this.

axios({
  ...
}).then(res => {
  //do something here
  router.push('/link');    ----------------------------- use it like this.
}).catch(err => { console.log(err) }

如果这能解决您的问题，请告诉我。

【讨论】：