Vue.js (vue-resource)应用程序结构问题

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发出一个超文本传输协议请求时，它不会监听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使用url参数连接root选项时，默认情况下会在它们之间添加一个反斜杠。如果您已经在root选项的末尾或任何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>