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

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

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

在main.js文件中，我有下面的代码片段，用于设置vue资源以发出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：

我是Vue.js的新手，因此非常感谢您帮助我构建我的应用程序，以便我可以轻松发送HTTP请求

---

谢谢

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

只需将根选项声明更改为：

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>

---

您确定ready:函数在main.js中的代码运行后启动吗？如果没有，我会添加一些console.log调用来证明这一点。我的回答对你有帮助吗，诺亚？

<template>
...
</template>

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

    })
  }
}
</script>