Как настроить роутинг Laravel + Vue 3?

Question

[Владимир Кохан]

Возникли сложности с роутами в связке Laravel 8 & Vue 3. В принципе, маршрутизация работает нормально, вот мой файл с роутами:

import {createRouter, createWebHistory} from 'vue-router'
import Home from "../comonents/Home";
import Articles from "../comonents/Articles";
import Laravel from "../comonents/Laravel";

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/laravel',
        name: 'Laravel',
        component: Laravel
    },
    {
        path: '/articles',
        name: 'Articles',
        component: Articles
    },

]

const router = createRouter({
    routes,
    history: createWebHistory(process.env.APP_URL),
})

export default router;

Все работает, если кликать по ссылкам. Но если ввести адрес прямо в браузере, выдает страницу 404.
Если использовать функцию createWebHashHistory, все работает, но в адресной строке появляется знак хеша - #
Читал про настройки сервера тут - https://router.vuejs.org/ru/guide/essentials/histo... , сделал, как написано для Apache, не помогло. Писал hash: false, тоже не помогло.

Answer 1

[Insaf Burangulov]

Все очень просто - если вы реализуете приложение SPA, то нужно, чтобы при запросе на людой адрес бекэнд laravel возвращал нужный вам шаблон, делается это обычно так:

Route::get('/{any?}', function () {
        return view('spa');
    })->where('any', '.*');

Все дело в том, что при вводе адреса в адресной строке laravel ищет маршрут, и не найдя его возвращает ошибку 404.