home更新

src/layout/Home copy.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="Home">
+    <el-container>
+      <el-header style="padding: 0"><v-head @refresh="toRefresh"></v-head></el-header>
+      <el-container>
+        <el-aside width="200px"><v-sidebar></v-sidebar></el-aside>
+        <el-main>
+          <div class="content-box" :class="{ 'content-collapse': collapse }">
+            <v-tags></v-tags>
+            <el-col :span="24" class="main_1">
+              <el-row>
+                <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+                <el-col :span="24" class="container" style="padding: 15px">
+                  <el-scrollbar style="height: 81vh">
+                    <router-view style="height: 70vh; padding: 20px" :key="viewKey"></router-view>
+                  </el-scrollbar>
+                </el-col>
+              </el-row>
+              <el-backtop target=".main_1"></el-backtop>
+            </el-col>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import vHead from './Header.vue';
+import vSidebar from './Sidebar.vue';
+import vTags from './Tags.vue';
+import breadcrumb from './breadcrumb.vue';
+import bus from './bus';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'Home',
+  props: {},
+  components: { vHead, vSidebar, vTags, breadcrumb },
+  data: function () {
+    return {
+      collapse: false,
+      tagsList: [],
+      viewKey: new Date().getTime(),
+    };
+  },
+  created() {
+    bus.$on('collapse-content', (msg) => {
+      this.collapse = msg;
+    });
+    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+    bus.$on('tags', (msg) => {
+      let arr = [];
+      for (let i = 0, len = msg.length; i < len; i++) {
+        msg[i].name && arr.push(msg[i].name);
+      }
+      this.tagsList = arr;
+    });
+  },
+  methods: {
+    toRefresh() {
+      this.viewKey = new Date().getTime();
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>

src/layout/Home.vue

@@ -1,63 +1,53 @@
 <template>
   <div id="Home">
-    <el-container>
-      <el-header style="padding: 0"><v-head @refresh="toRefresh"></v-head></el-header>
+    <el-container class="main">
+      <el-header>
+        <v-head @refresh="toRefresh"></v-head>
+      </el-header>
       <el-container>
-        <el-aside width="200px"><v-sidebar></v-sidebar></el-aside>
-        <el-main>
-          <div class="content-box" :class="{ 'content-collapse': collapse }">
+        <el-aside width="200px">
+          <v-sidebar></v-sidebar>
+        </el-aside>
+        <el-container>
+          <el-main>
             <v-tags></v-tags>
-            <el-col :span="24" class="content">
-              <transition name="move" mode="out-in">
-                <el-row>
-                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
-                  <el-col :span="24" class="container" style="padding: 15px">
-                    <el-scrollbar style="height: 81vh">
-                      <router-view style="height: 70vh; padding: 20px" :key="viewKey"></router-view>
-                    </el-scrollbar>
-                  </el-col>
-                </el-row>
-              </transition>
-              <el-backtop target=".content"></el-backtop>
-            </el-col>
-          </div>
-        </el-main>
+            <breadcrumb></breadcrumb>
+            <router-view :style="routerInfo" :key="viewKey"></router-view>
+          </el-main>
+        </el-container>
       </el-container>
     </el-container>
   </div>
 </template>
 
 <script>
-import vHead from './Header.vue';
-import vSidebar from './Sidebar.vue';
-import vTags from './Tags.vue';
-import breadcrumb from './breadcrumb.vue';
-import bus from './bus';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'Home',
   props: {},
-  components: { vHead, vSidebar, vTags, breadcrumb },
+  components: {
+    vHead: () => import('./Header.vue'),
+    vSidebar: () => import('./Sidebar.vue'),
+    vTags: () => import('./Tags.vue'),
+    breadcrumb: () => import('./breadcrumb.vue'),
+  },
   data: function () {
     return {
-      collapse: false,
-      tagsList: [],
       viewKey: new Date().getTime(),
+      routerInfo: {
+        background: '#ffffff',
+        margin: '10px',
+        padding: '10px',
+        display: 'flex',
+        'flex-direction': 'column',
+        height: '83vh',
+        'overflow-y': 'auto',
+        border: '1px solid #ddd',
+        'border-radius': '5px',
+      },
     };
   },
-  created() {
-    bus.$on('collapse-content', (msg) => {
-      this.collapse = msg;
-    });
-    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
-    bus.$on('tags', (msg) => {
-      let arr = [];
-      for (let i = 0, len = msg.length; i < len; i++) {
-        msg[i].name && arr.push(msg[i].name);
-      }
-      this.tagsList = arr;
-    });
-  },
+  created() {},
   methods: {
     toRefresh() {
       this.viewKey = new Date().getTime();
@@ -80,7 +70,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/ .el-scrollbar__wrap {
-  overflow-x: hidden !important;
+.main {
+  height: 100vh;
+  .el-header {
+    padding: 0;
+  }
+  .el-main {
+    padding: 0;
+    background-color: #f0f0f0;
+  }
 }
 </style>

src/layout/breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="breadcrumb">
     <el-row>
-      <el-col :span="24" class="crumbs">
+      <el-col :span="24" class="breadcrumb">
         <el-breadcrumb separator="/">
           <el-breadcrumb-item> <i class="el-icon-s-grid"></i> {{ breadcrumbTitle }} </el-breadcrumb-item>
         </el-breadcrumb>
@@ -15,12 +15,12 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   metaInfo: {},
   name: 'breadcrumb',
-  props: {
-    breadcrumbTitle: { type: String },
-  },
+  props: {},
   components: {},
-  data: function() {
-    return {};
+  data: function () {
+    return {
+      breadcrumbTitle: this.$route.meta.title,
+    };
   },
   created() {},
   methods: {},
@@ -30,4 +30,8 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.breadcrumb {
+  padding: 10px 10px 0 10px;
+}
+</style>