Question

我使用axios向 http://localhost:8000/api/residence 发送请求，此后，当我想通过单击按钮移至另一页面时，在页面中显示结果，但我得到了错误的url（当前网址+请求axios的网址），例如**（{http://localhost:8080/http://127.0.0.1:8000/residence/6）**，我如何解决此问题。

<div class="col-md-6 col-lg-4" v-for="r in res.data">
   <div class="card-body">
     <h4 class="card-title">{{r.nom}} <br></h4>
   </div>
   <div>
    <router-link :to="'/residence/' + r.id" class="btn btn-outline-primary 
btn-sm btt">Full info</router-link> 
   </div>           
 </div>

axios.get('http://127.0.0.1:8000/api/residence?page=' + page)
.then(response => {   
  this.res = response.data.data;
 });

Answer 1

表格：

<form @submit.prevent="addproperty()">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Property Title</label>
                                        <input type="text" name="property-title" class="form-control" placeholder="Property Title"required v-model="property_title">
                                    </div>
                                </div>

        <button type="submit" class="btn btn-success">Submit</button>
                        </form>

网址：

<script>
    export default {
        data() {
            return {
                property_title:null,

            }
        },
        methods: {
            addproperty() {

            axios.post('addproperty',{title: this.property_title});
                this.$router.push('/properties_list')
            },

        },
    }

</script>

Answer 2

localhost和127.0.0.1相同。当使用localhost:8000或127.0.0.1:8000访问时，它们都可以解析为您的应用程序。

除非您要从其他站点获取数据，否则不必在axios.get函数中提供基本URL。

axios.get('/api/residence?page='+page)可以正常工作。

如果需要更改所有axios调用的基本URL，则可以使用axios.defaults.baseURL更改基本URL。如果您想默认将/api/放在所有请求中，这将很有帮助。

如何在Vue.js中更正URL？

2 个答案: