时间戳

首页 > 解决方案 > 如何在刀片中显示组件？

laravel - 如何在刀片中显示组件？

问题描述

为什么我的应用程序的代码在 Laravel 中不起作用？如果我设置地址/admin，那么一切正常并显示 admin.blade.php 模板，如果我设置admin/one，它显示 admin.blade.php，但应用程序中的材料未显示

这是有效的：

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>

但这不是：

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>

标签： laravelvue.jslaravel-5

解决方案

重点是 Laravel 和 Vue 的路由不一样。Vue 路由有点虚拟。它们只存在于浏览器中并在其中工作。Vue 用于单页应用程序 - 也称为 SPA。

为了使它起作用，您应该更改您的管理路线以匹配以“/admin”开头的任何内容

所以，你的路线应该是这样的：

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

它应该与您的 vue 应用程序一起返回刀片视图。然后，您的 Vue 应用程序应该根据请求的路由显示请求的页面。这就是 vue-router 的用途。并且所有或您的管理页面和布局都应由 Vue 处理。在你的 Vue 的 resources/js/router/index.js 中（我想你使用 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',
});

推荐阅读