Question

我正在尝试创建Laravel Vue SPA应用程序。看来我无法使所有路由正常运行。每次我使用get（'{any}'）时，所有axios get方法调用都会返回index.blade.php。但是，如果我在route.js中定义的所有路由都在我的web.php（Laravel）中或多或少具有相同的签名，那么我的axios路由就可以正常工作。

web.php

// This work but every time I do an Axios call it returns my index.blade.php
Route::get('{any}', 'SiteController')->where('any', '.*');

// This works if I define all routes, with axios fetching data normally and 
// displaying the data in Vue normally
Route::get('/', 'SiteController');
Route::get('/blog', 'SiteController');
Route::get('/post/{postId?}', 'SiteController');

routes.js

const routes = [
    { path: '*', component: Home },
    {
        path: '/',
        component: Home,
        children: [
            {
                name: 'blog',
                path: '/blog',
                component: PageBlogLists,
            },
            {
                name: 'post',
                path: '/post/:page_id',
                component: PageBlog,
            },
        ],
    },
];

 export default new VueRouter({
        base: '/',
        fallback: true,
        mode: 'history',
        routes: routes,
    });

Answer 1

所以首先是根视图，我不知道您的模样如何，但是应该是这样

Route::get('{path}', function () {
    return view('index');
})->where('path', '(.*)');

第二，您正在构建SPA，不应使用web.php，而应使用api.php

如果您确实需要使用web.php，则可以将any向下移动到底部，并在所有其他路由之前加上其他前缀。

Answer 2

所以我终于成功了，我将路线更改为

 Route::get('/{any}', 'SiteController')->where('any', '^(?!api).*$');

并将我所有的API请求移至api.php文件

Route::resource('/posts', 'WordpressController');

router.js和axios现在可以正常工作了：）

Answer 3

我不清楚您手中的其他代码。

但是对于laravel vue路由器，此参考对我有很大帮助

https://medium.com/@weehong/laravel-5-7-vue-vue-router-spa-5e07fd591981

您可以尝试一下。希望这会有所帮助。

带Vue路由器（SPA）的Laravel路由无法正常工作

3 个答案: