// router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes =

[
{
name: 'Home',
path: '/',
meta: { layout: 'main' },
component: () => import('@/views/Home.vue')
},
{
name: 'Profile',
path: '/admin-panel/profile',
meta: { layout: 'dashboard', auth: true },
component: () => import('@/components/admin/Profile.vue')
},
{ path: '*', redirect: '/' }];

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});

router.beforeEach((to, from, next) => {
const requireAuth = to.matched.some(record => record.meta.auth);

firebase.auth().onAuthStateChanged(admin => {
if (requireAuth && !admin) { next('/auth?message=login') }
else { next() }
});
});

export default router;

// App.vue
<template>
<div id='app'>
<component :is='layout'>
<router-view/>
</component>
</div>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue';
import AuthLayout from '@/layouts/AuthLayout.vue';
import DashboardLayout from '@/layouts/DashboardLayout.vue';

export default {
components: { MainLayout, AuthLayout, DashboardLayout },
computed: {
layout() {
return ${this.$route.meta.layout || 'main'}-layout;
}
}
};
</script>

спс