我需要关于Axios的帮助。我在Laravel 6（带有SPARK包）和VueJS（版本2）上开发了一个SPA网络应用程序。
在一个Vue组件上，我想从我的bdd中检索数据。因此，我使用Axios对API URI发出get请求。但是，当我调用Axios request时，Response对象中的数据字段是一个HTML代码。
这是我的代码：

• • 路由/web. php**

Route::get('/', function(){
    return view('welcome');
});

Route::middleware('auth')->get('/{any?}', function (){
    return view('documents');
})->where('any', '[\/\w\.-]*');

"welcome"视图是一个刀片页面，如果用户未通过身份验证，则重定向到"/login "。否则，重定向到"/home"。链接"/home "在app.js中的vue-router上定义。另一个路径是显示Web应用程序（它是单页应用程序）的唯一方式。Vue示例位于" passeport "视图中。

• • 资源/js/应用程序. js**

import 'es6-promise/auto'

require('spark-bootstrap');
require('./components/bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

Vue.component('index', require('./components/pages/index').default);

import Dashboard from './components/pages/dashboard.vue';
...

const routes = [ 
    {
        name: 'dashboard',
        path: '/home',
        component: Dashboard,
    },
    {...}
]

const router = new VueRouter({ 
    history: true,
    mode: 'history', 
    routes: routes
});

var app = new Vue({
    mixins: [require('spark')],
    router,
});

在Vue示例化中添加路由器包。它与spark组件处于相同的上下文中（由#spark-app元素标识）

• • 资源/视图/文档. blade. php**

@extends('spark::layouts.app')

@section('content')
    <div id="app">
        <index :user="user"></index>
    </div>
@endsection

It is the view returned for any path. In the spark::layout.app, there is only a div with id="spark-app" and the @yield('content').

• • 资源/js/组件/页面/索引. vue**

<template>
    <transition name="fade">
      <Component :is="layout" :user="user">
        <router-view :layout.sync="layout" :user="user"></router-view>
      </Component>
    </transition>
</template>
.
.
<script>
    const default_layout = "default";

    export default{
      props: ['user'],

      data(){
        return{
          layout: 'div',
        }
      },
    }
</script>

这只是vue组件与路由器视图配置与布局。

• • 资源/js/组件/页面/ Jmeter 板. vue**

<template>
...
</template>

<script>
import Default from './../layouts/Default.vue'
    export default {
        props: ['user'],

        data: function () {
            return {
                documents: []
            }
        },
        created() { 
            this.$emit('update:layout', Default);
        },
        mounted(){
            // extract passeports's informations
            this.axios.get('/api/documentslist').then(response => {
                console.log(response);
                this.documents= response.data.data;
            });
        }
    }
</script>

在这里，我调用routes/api.php中定义的documentslist API。

• • 路径/api.php**

Route::middleware('auth:api')->group(function () {
    Route::get('/user', function (Request $request) {
        return $request->user();
    });
    Route::get('/documentslist', 'DocumentController@list');
});

• • 应用程序/http/控制器/文档控制器. php**

...
public function list(Request $request){
   return DocumentCollection(Document::all());
}
...

When I go to "/home", I verified "documents" data in Vue (or in the javascript console log), and response.data = "\r\n\r\n\r\n (...) v-if="notification.creator" :src="notification.creator.photo_url" class=... (10024 total length)"
但是，DocumentController中的list方法必须返回文档列表，而不是HTML代码。
另外，使用Passport Laravel实现了登录和API令牌的统一认证，Axios请求在同一个项目中工作，没有SPA结构。
我希望我的问题解释得很清楚，而且我忘记了任何需要理解的细节。
谢谢。