CODEWITHSUNDEEP
laravelvue.jslaravel-5
user11509388
user11509388

Reputation:

How do i show component in blade?

Why the code of my app is not working in Laravel? If I set the address /admin, then everything works and shows the admin.blade.php template and if I set admin/one, it shows admin.blade.php, but the material that is in the app is not shown

This is working:

Route::get('/admin','AdminController@index')->middleware(['auth', 'auth.admin']);

<body>
it's work
<div id="app">
    it's working
    <router-view></router-view>
</div>
<script src="js/app.js">

</script>
</body>

but this is not:

Route::get('/admin/one','AdminController@index')->middleware(['auth', 'auth.admin']);

<body>
it's work
<div id="app">
    it's not working
    <router-view></router-view>
</div>
<script src="js/app.js">

</script>
</body>

Upvotes: 1

Views: 238

Answers (1)

Ivan Klochkov
Ivan Klochkov

Reputation: 702

The point is that Laravel's and Vue routes are not the same. Vue routes are kinda virtual. They only exist and work inside the browser. Vue is used for single-page applications - aka SPA.

In order for this to work, you should change your admin route to match anything starting with "/admin"

so, your route shall be like:

Route::get('/admin/{param?}','AdminController@index')->where('param', '(.*)')->middleware(['auth', 'auth.admin']);

and it should return a blade view with your vue application. Your Vue application then should display the requested page based on what route was requested. That's what vue-router was made for. And all or your admin pages and layouts should be handled by Vue. And in your Vue's resources/js/router/index.js ( I suppose you use Laravel Mix )

export const routes = [
    {
        path: '/',
        component: MainLayoutComponent,
        redirect: { name: 'home' },
        children: [
            {
                path: 'home',
                name: 'home',
                component: AdminHome,
                meta: {
                    title: 'Main Page'
                },
            },
        ]
    }
];
const router = new Router({
    routes,
    base: '/admin', 
    mode: 'history',
});

Upvotes: 1

Related Questions