如何更正vuejs中的网址？

Posted 2023-03-15

【中文标题】如何更正vuejs中的网址？

【英文标题】：How to correct url in vuejs?

【发布时间】：2020-01-09 12:10:52

【问题描述】：

我使用 axios 向 http://localhost:8000/api/residence 发送请求，然后当我想通过单击按钮移动到另一个页面时，我在页面中显示结果，我得到了错误的 url（当前 url +请求 axios 的 url) 像这样**(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;
 );

【问题讨论】：

我们需要查看一些代码。

您的按钮在 href 属性中是否有前导 / ？ href="/http://127.0.0.1:8000/residence/6".

【参考方案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>

【讨论】：

把你的答案描述来帮助用户理解你的代码。

【参考方案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/ 添加到所有请求中，这将很有帮助。