Laravel 路由器视图 returns 404 页面

Question

我在我的应用程序中使用 Vue Router。当用户访问 '' 时，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' 时发生了！在我将模式更改为历史之前，它之前工作正常。

Answer 1

刚刚找到解决方案：

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

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

Answer 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') },
        ]
    },
    

];

Laravel 路由器视图 returns 404 页面

Laravel Vue Router returns 404 page

laravel

vue.js

vue-router