router-link перезагружает страницу

Никак не могу понять, почему не получается реализовать SPA при использовании laravel9 и vue3 По логике, станица не должна перезагружаться, а при это должны отображаться другие компоненты vue

app.js

import './bootstrap';
import router from "./router";
import Index from "./components/Index.vue";

import { createApp } from 'vue';

createApp(Index).use(router).mount('#app')

router.js

import { createRouter, createWebHistory } from "vue-router";


import TagComponent from "./components/TagComponent.vue";

const routes = [
    { path: '/posts', component: () => import('./components/PostComponent.vue') },
    { path: '/tags', component: TagComponent },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

Index.vue

<template>
    <div>
        <router-link to="/posts">Posts</router-link>
        <router-link to="/tags">Tags</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "Index"
}
</script>

<style scoped>

</style>

web.php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Route::get('/{page}', [\App\Http\Controllers\IndexController::class, '__invoke'])->where('page', '.*');

Буду благодарен за любую подсказку, перелопатил весь интернет, не нашёл даже схожей проблемы ни у кого


Ответы (0 шт):