使用 vue axios 加载 Laravel 视图答案

【问题标题】：Load a Laravel view using vue axios使用 vue axios 加载 Laravel 视图
【发布时间】：2020-02-29 01:35:34
【问题描述】：

我试图从我的 Vue 组件中创建一个名为 faq.blade.php 的 Laravel 视图的链接，我尝试使用 axios，即使它返回了我之后留下的 console.log它没有加载视图的响应。我该如何解决？

FaqController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FAQController extends Controller
{
    public function index(){
        return view('main.faq');
    }
}

我尝试从这个组件调用它：Main.vue（在'/'路由中）

    <b-list-group-item align="left" @click="faq"><strong>></strong> FAQ</b-list-group-item>
    <b-list-group-item align="left" @click="services"><strong>></strong> Services</b-list-group-item>


<script>
export default {
    methods: {
        faq() {
        axios.get('/faq')

            .then(res => {
                console.log("faq");
            })
        },
        services(){
        axios.get('/services')

            .then(res => {
                console.log("services");
            })
        }
    }
}
</script>

路由：web.php

Route::get('/', function () {
    return view('main.landing');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/faq', 'FAQController@index')->name('faq');
Route::get('/services', 'ServicesController@index')->name('services');

【问题讨论】：

响应将返回视图中的 HTML 块作为响应，如果您想将该视图加载到页面中，只需重定向

标签： javascript laravel vue.js

【解决方案1】：

Axios 调用将在响应中获取 HTML 块作为字符串，你不想这样做，如果你想将该视图加载到浏览器中，只需重定向到该路由

export default {
    methods: {
        faq() {
            window.location = "/faq";
        },
        services() {
            window.location = "/services";
        }
    }
};

但如果您不希望页面重新加载/刷新（这就是我认为您使用 axios 的原因），那么您可以使用 TurboLinks 或使用 VueRouter 设置 SPA 并将视图作为组件加载

希望对你有帮助

【讨论】：