javascript - Axios 在嵌套 Vue JS (Laravel API) 中返回未定义

Question

在 Vue JS 中使用嵌套路由时，我在使用 Axios 时遇到了很多麻烦。

我发现，如果我的组件位于根(“/”)，就像下面的“Accounts”组件一样，那么 Axios 会正确加载数据，这里没有问题。

但是如果我进入嵌套在“/accounts/:account_id”的“Campaigns”组件，那么 Axios 就会停止工作。事实上，它根本不返回任何数据。但是，该 API 是有效的，因为 Postman 正确返回了数据。

因此，每当我将组件移动到嵌套 URL 中时，Axios 就会停止工作。我不知道为什么会发生这种情况，并且在网上找不到任何解决方案。我确信它一定很简单，但我看不到。

app.js(包括路由)

const router = new VueRouter({
mode: 'history',
routes: [
    {
        path: '/',
        name: 'accounts',
        component: Accounts
    },
    {
        path: '/accounts/:account_id',
        name: 'campaigns',
        component: Campaigns
    },
],
});

广告事件组件

<script>
   import axios from 'axios'

    export default {

        data() {
            return {
                accountID:  null,
                campaigns: [],
                campaignsMeta: {},
            };
        },

        mounted() {
          this.accountID = this.$route.params.account_id;
          this.fetchCampaigns();
        },

        methods : {
          fetchCampaigns(page = 1) {
            const AuthStr = 'Bearer '. concat(this.apitoken);
            axios.get("api/account/" + this.accountID + "?page=" + page)
              .then(({data}) => {
                this.campaigns = data.data;
                this.campaignsMeta = data.meta;
            });
          }
        },
    }
</script>

Answer 1

对于将来遇到类似问题的任何人，我犯了在 Axios Get 请求中使用相对 URL 而不是绝对 URL 的错误。

原始代码

axios.get("api/account/" + this.accountID + "?page=" + page)
  .then(({data}) => {
    this.campaigns = data.data;
    this.campaignsMeta = data.meta;
});

正确代码

axios.get("/api/account/" + this.accountID + "?page=" + page)
  .then(({data}) => {
    this.campaigns = data.data;
    this.campaignsMeta = data.meta;
});

请注意“/api/account”开头的“/”表示绝对路径，而不是相对路径。

这很重要的原因是:

• 对于相对 URL，API 请求将附加到当前页面 URL 的末尾，因此帐户组件上的 API 请求将是:/accounts/:account_id/api/account(这是错误的!)
• 对于绝对网址，API 请求是从域名发出的，因此帐户组件上的 API 请求为:domain.com/api/account(正确!)

谢谢!