Axios response.data返回HTML而不是对象

Question

我需要有关Axios的帮助。我在Laravel 6（带有SPARK软件包）和VueJS（版本2）上开发了SPA webapp。

在Vue组件上，我想从我的bdd检索数据。因此，我使用Axios在API uri上进行get请求。但是，当我调用Axios请求时，Response对象中的数据字段是HTML代码。

这是我的代码：

routes / 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”视图中。

resources / js / app.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元素标识）

resources / views / documents.blade.php

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

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

这是返回任何路径的视图。在spark :: layout.app中，只有一个具有id =“ spark-app”和@yield（'content'）的div。

resouces / js / components / pages / index.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 /组件/页面/dashboard.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定义。

routes / api.php

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

app / http / Controllers / DocumentController.php

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

[当我转到“ / home”时，我在Vue（或javascript控制台日志）中验证了“文档”数据，并且response.data =“ \ r \ n \ r \ n \ r \ n（... ）v-if = \“ notification.creator \”：src = \“ notification.creator.photo_url \” class = ...（总长度为10024）“

但是，DocumentController中的list方法必须返回文档列表，而不是HTML代码。

此外，我使用Passport Laravel通过登录名和API令牌进行统一身份验证。而且Axios请求可以在没有SPA结构的同一项目中工作。

我希望我对问题的解释很清楚，并且我忘记了要理解的任何细节。

谢谢。

Answer 1

您可以简单地从控制器返回像这样

return response()->json(Document::all());

Answer 2

我怀疑API链接将使用SPA路由进行重定向（在routes / web.php中，任何路径都返回“主”视图）。我尝试在routes / web.php中更改路由。

而不是：

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

我放这个：

Route::middleware('auth')->get('/home', function (){
    return view('home');
});

类似，此路线未考虑所有路径。

而且...有效！但是...这不是我想要的:(实际上，如果没有使用'/ {any？}'的路由，SPA将无法正常工作。

我不明白为什么该方法在Laravel中使用另一个项目（没有Spark包），并且不适用于该项目。