Load a Laravel view using vue axios

Question

I'm trying to make a link to a Laravel view called faq.blade.php from my Vue component, I tried to use axios and even when it returns the console.log I left after the response it isn't loading the view. How could I solve it?

FaqController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

I try to call it from this component: Main.vue (which is in the '/' route)

    <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>

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

The response will return the block of HTML in the view as a response, if you want to load that view into the page, simply redirect — Salim Djerbouh

Salim Djerbouh Salim Djerbouh · Accepted Answer · 2019-11-03T15:20:25

The Axios call will get the block of HTML as a string in the response, you don't want to do that, if you want to load that view into the browser, simply redirect to that route

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

But if you want the page not to reload/refresh (which is why I think you're using axios) then you can either use TurboLinks or setup an SPA with VueRouter and load a view as a component

Hope this helps

Load a Laravel view using vue axios

1 Answers