Laravel 子路由中的 Vue Router 找不到正确的组件

Posted 2023-02-22

【中文标题】Laravel 子路由中的 Vue Router 找不到正确的组件

【英文标题】：Vue Router in Laravel subroute can't find correct component

【发布时间】：2020-03-27 12:14:53

【问题描述】：

我在另一个 Laravel/Vue 项目上运行了几乎相同的配置，该项目运行得非常好，但在主路由 / 上。在这里，我将 Vue 实例分组到 admin 子路由中，我在管理员路由到我设置的 PageNotFound 组件之后键入的所有内容。

我在 web.php 中的路线：

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

我的 Vue 路由器设置：

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.'
                    
                ]
            ,
        
    ],
);

解决方案：

似乎 Vue Router 不关心我在 Laravel 中定义的任何前缀，它会查看完整路径，因此在上面的仪表板中，我将路径指定为 /，它实际上应该是 /admin。

【参考方案1】：

admin 保留在 webserver 中，例如使用管理员作为前缀