Question

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

我发现，如果我的组件位于下面的“帐户”组件的根（“ /”）处，则Axios可以正确加载数据，这里没有问题。

但是，如果我转到嵌套在“ / accounts /：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

对于以后遇到类似问题的任何人，我都会在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的末尾，因此Accounts组件上的API请求应为：/ accounts /：account_id / api / account（这是错误的！）< / li>
对于绝对URL，API请求是从域名发出的，因此Accounts组件上的API请求是：domain.com/api/account（正确！）

谢谢！

Axios在嵌套的Vue JS（Laravel API）中返回未定义的

1 个答案: