Vue.js Возвращает JSON при обновлении страницы

Question

Я новичок в vue.js, и мне это уже нравится, за исключением того, что у меня есть некрасивая часть, которая мне не нравится: «страница возвращает JSON, когда я нажимаю на обновление»

Однако, если я перехожу к главной странице, то есть к главной странице, она загружается правильно, как и ожидалось, но если я нажимаюпри обновлении я получаю ответ JSON.

Я использую laravel для своего бэкенда, в моем контроллере я возвращаю ответ JSON (да, я знаю), однако я ожидаю vue.js для auto-выявите ссылки для меня и сделайте их магию, как если бы я зашел на ссылку / страницу с главной страницы.

Вот как выглядит контроллер, возвращающий элемент на главную страницу

public function index()
{
    //
        $task = TodoTask::orderBy('created_at', 'desc')->paginate(4);
        return \request()->json(200, $task);

}

Я провел довольно много исследований по этому вопросу, и я понял по этой ссылке https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations, что мне нужно настроить свой файл .htaccess, чтобы это можно было сделать.

Вот как выглядит мой файл .htaccess

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Что я могублай делать неправильно?

мои Vue маршруты

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');


window.Vue = require('vue');
import VueRouter from 'vue-router';

window.Vue.use(VueRouter);

Vue.component('example-component', require('./components/ExampleComponent.vue'));
//Vue.component('tasks', require('./components/TodoTask.vue'));
const example = require('./components/ExampleComponent.vue');
const Samplelink = require('./components/SampleComponent.vue');
const task = require('./components/TodoTask.vue');



const routes = [{
    path: '/example',
    component: example

}, {
    path: '/sample',
    component: Samplelink
}, {
    path: '/tasks',
    component: task
}];

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


const app = new Vue({
    el: '#app',
    router
}).$mount('#app');