Laravel Vue Router 返回 404 页面

Posted 2023-02-22

【中文标题】Laravel Vue Router 返回 404 页面

【英文标题】：Laravel Vue Router returns 404 page

【发布时间】：2018-12-03 03:55:03

【问题描述】：

我在我的应用程序中使用 Vue 路由器。当用户访问'' 时，HomeComponent 应该会加载并且确实如此！但是，当我转到 /login 时，LoginComponent 不会加载，应用程序会将我重定向到 404 页面。请帮忙。

routes.js

import HomeComponent from './components/Home.vue';
import LoginComponent from './components/auth/LoginComponent.vue';

export const routes = [
    path: '', component: HomeComponent,
    path: '/login', component: LoginComponent,
];

app.js

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

routes/web.php

Route::get('/', function () 
    return view('layouts.master');
);

这些路由加载的地方是MasterComponent。 HomeComponent 加载但其他组件不加载。实际上，它发生在我在我的app.js 中写mode: 'history' 时！在我将模式更改为历史之前，它之前工作正常。

【参考方案1】：

刚刚找到解决办法：

Route::get('/vue_capture?', function () 
    return view('layouts.master');
)->where('vue_capture', '[\/\w\.-]*');

这有助于 Laravel 捕获 Vue 生成的 URL！就是这样！

【讨论】：

它有效，但如果有人能解释它为什么有效，不胜感激？

我在Route::get('/any', 'SpaController@index')->where('any', '.*'); 之前用过这个，但没用。似乎添加 arround any 解决了我的问题。谢谢。

【参考方案2】：

先把这个放到你的web.php中

Route::get('/any', [\App\Http\Controllers\TestController::class,'home'])->where('any', '.*');

然后在你的 router.js 中使用这个 常量路线 = [

    
        path: '/',
        component: () => import('./pages/Layout'),
        children: [
             path: '', component: () => import('./components/DataTable') ,
        ]
    ,
    

];