daniel/Personal_Website
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add custom body classes to the router file

Browse Source
This commit is contained in:
Daniel_I_Am 2021-09-01 23:38:59 +02:00
parent 624ad8ad86
commit 8d450f42b2
3 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/js/router-app.js vendored
View File

@ -22,4 +22,30 @@ const router = VueRouter.createRouter({
routes, routes,
}); });
const classes = {
'index': ['page-home'],
};
router.afterEach((to, from, failure) => {
if (!failure) {
if (!!from && !!from.name) {
if (Object.keys(classes).includes(from.name.toString())) {
for (const className of classes[from.name.toString()]) {
if (document.body.classList.contains(className)) {
document.body.classList.remove(className);
}
}
}
}
if (!!to && !!to.name) {
if (Object.keys(classes).includes(to.name.toString())) {
for (const className of classes[to.name.toString()]) {
document.body.classList.add(className);
}
}
}
}
});
export default router export default router

4
resources/views/home.blade.php
View File

@ -1,3 +1,5 @@
@extends('template.base') @extends('template.base')
@section('body-classes', 'page-home') @push('js')
<script src="{{ asset('js/app.js') }}"></script>
@endpush

3
resources/views/template/base.blade.php
View File

@ -11,12 +11,11 @@
@stack('style') @stack('style')
</head> </head>
<body class="@yield('body-classes')"> <body>
@section('body') @section('body')
<div id="app"></div> <div id="app"></div>
@show @show
<script src="{{ asset('js/app.js') }}"></script>
@stack('js') @stack('js')
</body> </body>