javascript - 使用 vue axios 加载 Laravel View

Question

我试图从我的 Vue 组件链接到名为 faq.blade.php 的 Laravel View ，我尝试使用 axios，甚至当它返回我之后离开的 console.log 时它没有加载 View 的响应。我该如何解决？

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');

Answer 1

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

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

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

希望对你有帮助