Vue.js（Vue资源）应用程序结构问题与发送HTTP请求

Question

我的Vue.js应用程序结构如下：

/app
    --assets
    --components
        --dashboard.vue
    --filters
    --views
        --dashboard-view.vue
    app.vue
    main.js

在我的main.js文件中，我具有下面的代码段来设置vue-resource以发出HTTP请求：

Vue.use(require('vue-resource'))

Vue.http.options.root = 'http://localhost:3000/api/v1/'
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('authentication_token')

但是，当我尝试在dashboard-view.vue发出HTTP请求时，它不会监听main.js设置的配置。

这是dashboard-view.vue ：

<template>
...
</template>

<script>
module.exports = {
  ready: function() {
    this.$http.get('/me', function(data, status, request) {

    })
  }
}
</script>

我对Vue.js相当陌生，因此非常感谢您提供有关如何构建我的应用程序的帮助，以便我可以轻松发送HTTP请求。

谢谢

Answer 1

我遇到了同样的问题。 当vue-resource将root选项与url参数连接在一起时，默认情况下会在它们之间添加反斜杠。 如果您在root选项的末尾或任何url参数的开头已经有一个反斜杠，则它将跳过连接并默认为当前的根url。

只需将您的root选项声明更改为：

Vue.http.options.root = 'http://localhost:3000/api/v1'

并将您在vue组件中的呼叫更改为：

<template>
...
</template>

<script>
module.exports = {
  ready: function() {
    this.$http.get('me', function(data, status, request) {

    })
  }
}
</script>