feat: change layout due to correct routes

lbwa · Sep 30, 2018 · 89bde6c · 89bde6c
1 parent 10b60ea
commit 89bde6c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/layout/Admin.vue b/src/layout/Admin.vue
@@ -3,9 +3,7 @@
     <app-aside/>
     <el-container>
       <app-header @toggleAside="toggleAside"></app-header>
-      <!-- 此处的 keep-alive 缓存无效，因每次路由的变化都将导致动态组件重新渲染 -->
-      <!-- 见 layout/Admin -->
-      <!-- https://markus.oberlehner.net/blog/dynamic-vue-layout-components/ -->
+
       <keep-alive>
         <router-view class="main__wrapper"></router-view>
       </keep-alive>
@@ -65,7 +63,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-#root
+.admin
   min-height: 100vh
 
 .footer

diff --git a/src/view/App.vue b/src/view/App.vue
@@ -12,14 +12,23 @@
 export default {
   data () {
     return {
-      defaultLayout: 'admin'
+      layout: 'admin'
     }
   },
 
+  methods: {
+    handleRouteUpdate (to, from) {
+      this.layout = to.path === '/' ? 'login' : 'admin'
+    }
+  },
+
+  watch: {
+    '$route': 'handleRouteUpdate'
+  },
+
   computed: {
     currentLayout () {
-      const layout = this.$route.meta.layout || this.defaultLayout
-      const formatLayoutKey = layout.replace(/^[a-z]/, key => {
+      const formatLayoutKey = this.layout.replace(/^[a-z]/, key => {
         return key.toUpperCase()
       })
       return () => import(/* webpackChunkName: 'layout-[request]' */ `LAYOUT/${formatLayoutKey}.vue`)