У меня есть файл GetAnimal.vue
, содержащий это:
<template>
<div>
<form v-on:submit.prevent="getAnimal()">
<textarea v-model = "animal"
name = "animal" type="animal" id = "animal"
placeholder="Enter your animal here">
</textarea>
<button class = "custom-button dark-button"
type="submit">Get animal</button>
</form>
<button class="custom-button" v-on:click = "goTo('/viewanimal')">
View animal
</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data: function () {
return {
name: 'defaultAnimal',
animal: {
name: 'Cat',
furColor: 'red',
population: '10000',
isExtinct: false,
isDomesticated: true
}
}
},
methods: {
goTo: function(path) {
// alert(path);
this.$router.push({ path });
},
getAnimal: function () {
alert("animals");
this.info = {
"fur-color": "yellow", "population": '51000', "isExtinct":
false, "isDomesticated": true
};
axios({
method: 'get',
url: 'http://localhost:8080/getanimal',
data: {
animal: this.animal
}
});
}
}
}
</script>
внутри маршрутизатора. js он отображается следующим образом:
{
path: "/getanimal",
component: () => import('./views/GetAnimal.vue')
}
Когда я от go до http://localhost:8080/getanimal
в браузере, я вижу следующее:
(имеет некоторые стили, унаследованные от App.vue
)
Когда я нажимаю кнопку Get Animal
, отображается предупреждение animal
, а затем я вижу это в консоли:
Почему я не могу отправить запрос axios
на ту самую страницу, на которой я сейчас нахожусь? Почему я получаю ошибку 404 и как ее исправить?