Vue Router in Laravel subroute can't find correct component

Question

I've run almost identical configuration on another Laravel/Vue project that worked perfectly fine but on the main route /. Here where I group the Vue instance in an admin subroute everything I type after admin routes to a PageNotFound component i have set up.

My routes in web.php:

Route::group(['prefix' => 'admin'], function() {
    Route::get('/{route?}', 'AdminController@index')
    ->where('route', '.*')->fallback();
});

My Vue Router setup:

const router = new VueRouter({
    mode: 'history',
    // linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active',
    routes: [
        {
            path: '/', // Solution: '/admin' not just '/'
            component: Dashboard,
            meta: {
                title: 'Dashboard',
                metaTags: [
                    {
                        name: 'description',
                        content: 'The about page of our example app.'
                    },
                    {
                        property: 'og:description',
                        content: 'The about page of our example app.'
                    }
                ]
            },
        },
        {
            path: '*',
            component: PageNotFound,
            meta: {
                title: '404 - Page Not Found',
                metaTags: [
                    {
                        name: 'description',
                        content: 'The about page of our example app.'
                    },
                    {
                        property: 'og:description',
                        content: 'The about page of our example app.'
                    }
                ]
            },
        }
    ],
});

SOLUTION:

Seems like Vue Router doesn't care about any prefixes I define in Laravel, it looks at the full path, so in Dashboard above where I specified the path as / it should actually be /admin.

Answer 1

admin is reserved in webserver , example use administrator for prefix