javascript - Vue.js (vue-resource) 发送 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 参数的开头已经有反斜杠，它将跳过连接并默认为当前根网址。

只需将您的根选项声明更改为:

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>