Axios返回嵌套Vue JS (Laravel API)中未定义的

Question

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

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

但是，如果我转到“Axios”组件(嵌套在“/Axios/:account_id”)上，那么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

对于将来遇到类似问题的人，我错误地使用了一个相对URL，而不是Axios请求的绝对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的末尾，因此Accounts组件上的API请求将是: /accounts/:account_id/api/account (这是错误的！)
• 对于绝对URL，API请求是从域名发出的，因此account组件上的API请求是: domain.com/api/account (正确！)

谢谢!