Problems with routing in laravel / vuejs-CodePudding

Good day to all! When 'untying' from web.php as follows:

Route::get('/{page}', IndexController::class)->where('page', '.*');

the router looks like this:

import Vue from 'vue'

import VueRouter from "vue-router";

Vue.use(VueRouter)

export default new VueRouter({
    mode: "history",

    routes: [
        {
            path: '/parts', component: () => import('./components/Part/PartIndex'),
            name: 'part.index'
        }
    ] 
})

The IndexController is triggered and goes to the main page. Next, the idea begins to work api.php .

Route::prefix('parts')->group(function () {
    Route::get('/', PartIndexController::class);
});

However, when the axios.get('/api/parts/') method is called from the component, the IndexController is triggered again and returns the home page instead of the actions that PartIndexController should have performed.

If you remove the web in the first route.php ->where('page', '.*'); Part IndexController is triggered, but does not work correctly (outputs 404 on reboot).

I ask for help.

CodePudding user response：

The fix is simple, move your default route at the end of the routes file.

i.e.

move the route

Route::get('/{page}', IndexController::class)->where('page', '.*');

at the end of your routes file.

Why?

Since you have the dynamic route /{page} all the routes below the dynamic routes are considered at the dynamic parameter to the dynamic route.

hence when you are triggering parts url, it's triggering the root dynamic route with page parameter as parts.

Note: It's not recommended to have a root dynamic route.

Hope this helps.

Best.

CodePudding user response：

Here is the solution: where('any', '^(?!api).*$');