Всем привет, хотел спросить есть страницы, есть layouty, которые определены для страниц в router/index.js. В app.vue поставил условие что по свойству meta определить layout инача empty layout. Все работает, но только вначале загружается empty layout, как это поправить?
App.vue
import MainLayout from '@/layouts/MainLayout';
import CabinetLayout from '@/layouts/CabinetLayout';
import EmptyLayout from '@/layouts/EmptyLayout';
export default{
computed:{
layout() {
if(this.$route.meta.layout)
{
return (this.$route.meta.layout) + '-layout';
}
else{
return 'empty' + '-layout';
}
}
},
components:{
CabinetLayout,EmptyLayout,MainLayout
}
}
router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: Home,
meta:{layout:'main'}
},
{
path: "/nutrition/foodmenu",
name: "foodmenu",
meta:{layout:'cabinet'},
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/nutrition/Foodmenu.vue")
},
{
path: "/nutrition/journal",
name: "journal",
meta:{layout:'cabinet'},
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/nutrition/Journal.vue")
},
{
path: "/login",
name: "login",
meta:{layout:'main'},
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/Login.vue")
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
