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>