Axios возвращает неопределенное значение во вложенном Vue JS (Laravel API)

Question

Так что у меня много проблем с Axios при использовании вложенных маршрутов в Vue JS.

Я обнаружил, что если мой компонент находится в корневом каталоге ("/"), как и в случае с компонентом "Учетные записи" ниже, то Axios загружает данные правильно, здесь нет проблем.

Но если я перешел к компоненту «Кампании», который вложен в «/ account /: 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-адреса, а не абсолютного URL-адреса для запроса Axios Get.

Оригинальный код

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 для компонента «Учетные записи» был бы: / account /: account_id / api /учетная запись (что неверно!)
• Для абсолютных URL-адресов запрос API делается из имени домена, поэтому запрос API для компонента «Учетные записи»: domain.com/api/account (правильно!)

Спасибо!