darkylmnx · July 30, 2018 22:11 · Jul 30, 2018 · Jul 30, 2018 · Jul 30, 2018 · Jul 30, 2018
diff --git a/LayoutC.vue b/LayoutC.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <the-header />
-    <h1> i'm layout A1 </h1>
+    <h1> i'm layout C </h1>
 
     <!-- let's use the sub layout -->
     <a-sub-layout>

diff --git a/LayoutA1.vue → LayoutC.vue b/LayoutA1.vue → LayoutC.vue
diff --git a/router.js b/router.js
@@ -13,7 +13,7 @@ new VueRouter({
     {
       name: 'some-random-page',
       path: '/bla1',
-      meta: {layout: 'LayoutA1' },
+      meta: {layout: 'LayoutC' },
       component: () => import('@/pages/Random1.vue')
     },
     {

diff --git a/SubLayoutA.vue → ASubLayout.vue b/SubLayoutA.vue → ASubLayout.vue
diff --git a/LayoutA.vue b/LayoutA.vue
@@ -4,10 +4,10 @@
     <h1> i'm layout A </h1>
 
     <!-- let's use the sub layout -->
-    <sub-layout-a>
+    <a-sub-layout>
       <slot />
       <!-- here we are doing slot transfer, the main component will appear within the sub layout -->
-     </sub-layout-a>
+     </a-sub-layout>
 
      <!-- here we have a footer -->
      <the-footer />

diff --git a/LayoutA1.vue b/LayoutA1.vue
@@ -4,10 +4,10 @@
     <h1> i'm layout A1 </h1>
 
     <!-- let's use the sub layout -->
-    <sub-layout-a>
+    <a-sub-layout>
       <slot />
       <!-- here we are doing slot transfer, the main component will appear within the sub layout -->
-     </sub-layout-a>
+     </a-sub-layout>
 
      <!-- no footer here -->
    </div>

diff --git a/router.js b/router.js
@@ -0,0 +1,26 @@
+// as you will notice
+// we never use a sub layout directly
+// sub layouts are only used to contain common markup for main layouts
+
+new VueRouter({
+  routes: [
+    {
+      name: 'home',
+      path: '/',
+      meta: {layout: 'LayoutA' },
+      component: require('@/pages/Home.vue').default // load sync mode 
+    },
+    {
+      name: 'some-random-page',
+      path: '/bla1',
+      meta: {layout: 'LayoutA1' },
+      component: () => import('@/pages/Random1.vue')
+    },
+    {
+      name: 'some-random-page-2',
+      path: '/bla2',
+      meta: {layout: 'LayoutB' },
+      component: () => import('@/pages/Random2.vue')
+    }
+  ]
+})
diff --git a/LayoutA.vue b/LayoutA.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <the-header />
+    <h1> i'm layout A </h1>
+
+    <!-- let's use the sub layout -->
+    <sub-layout-a>
+      <slot />
+      <!-- here we are doing slot transfer, the main component will appear within the sub layout -->
+     </sub-layout-a>
+
+     <!-- here we have a footer -->
+     <the-footer />
+   </div>
+<template>
diff --git a/LayoutA1.vue b/LayoutA1.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <the-header />
+    <h1> i'm layout A1 </h1>
+
+    <!-- let's use the sub layout -->
+    <sub-layout-a>
+      <slot />
+      <!-- here we are doing slot transfer, the main component will appear within the sub layout -->
+     </sub-layout-a>
+
+     <!-- no footer here -->
+   </div>
+<template>
diff --git a/LayoutB.vue b/LayoutB.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <the-header />
+    <h1> i'm layout B</h1>
+
+    <aside> i'm a side bar</aside>
+
+    <slot />
+    <!-- no sub layout -->
+    <!-- the main compoent will apppear hear as a slot -->
+
+    </the-footer />
+   </div>
+ </template>
diff --git a/SubLayoutA.vue b/SubLayoutA.vue
@@ -0,0 +1,7 @@
+<template>
+  <!-- this layout will not have any header or general things to all layouts -->
+  <div>
+    <h2> i'm a sub layout </h2>
+    <slot />
+  </div>
+</template>
diff --git a/TheFooter.vue b/TheFooter.vue
@@ -0,0 +1,3 @@
+<template>
+  <footer> hey i'm the footer </footer>
+</template>
diff --git a/TheHeader.vue b/TheHeader.vue
@@ -0,0 +1,3 @@
+<template>
+  <header> hey i'm the header </header>
+</template>
No results found