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

Question

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

我發現如果我的組件在根（“/”），就像下面的“帳戶”組件一樣，那么 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

對於將來遇到類似問題的任何人，我犯了一個錯誤，即使用相對 URL 而不是 Axios Get 請求的絕對 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 請求是從域名發出的，因此 Accounts 組件上的 API 請求是：domain.com/api/account（正確！）

謝謝！