Vue.js Layout determine?

Hi all, I wanted to ask is, the page is layouty which are defined for pages in router/index.js. In the app.vue has set a condition that the meta property to determine the layout otherwise empty layout. It works, but only loaded initially empty layout, how to fix it?
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 from Vue "vue";
import VueRouter from "vue-router";
Home from import "../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;
April 7th 20 at 11:08
2 answers
April 7th 20 at 11:10
Solution
Decided that first imported components in router/index.js then have already used the imported component
April 7th 20 at 11:12
Look at how many times you have called the method `layout`, and then look what's your url, and then see what your ranting. Maybe it's the lack of `/` at the end of your website address.

Find more questions by tags Vue.js