我有后端(管理面板)和前端(网站)的 2 种布局,实现如下。使用惯性默认中间件文件。
项目/应用程序/Http/Middleware/HandleInertiaRequests.php
class HandleInertiaRequests extends Middleware
{
protected $rootView = 'app';
public function rootView(Request $request)
{
if ($request->segment(1) == 'admin') {
return 'admin';
}
return parent::rootView($request);
}
public function version(Request $request)
{
return parent::version($request);
}
public function share(Request $request)
{
return array_merge(parent::share($request), [
//
]);
}
}
项目/资源/js/Shared/Frontend/Layouts/Layout.vue
<template>
<Header />
<slot />
<Footer />
</template>
<script>
import Header from '../Partials/Header'
import Footer from '../Partials/Footer'
export default {
components: {
Header,
Footer
},
name: "FrontendLayout"
}
</script>
项目/资源/js/Pages/Frontend/Auth/Login.vue
<template>
...
</template>
<script>
import Layout from '@/js/Shared/Frontend/Layouts/Layout';
export default {
layout: Layout,
metaInfo: { title: 'Login' },
data() {
return {
form: this.$inertia.form({
'email': '',
'password': '',
'remember': false
})
}
},
methods: {
submit() {
this.form.post(route('login.store'))
}
}
}
</script>