⚡ 架构底层优化

src/cache.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import store from './store';
+Vue.mixin({
+  beforeRouteLeave: function (to, from, next) {
+    if (this.$route.meta.keepAlive === true) {
+      const result = this.$route.meta.keepAlive === true && store.state.tags.tagList.some(ele => {
+        return ele.value === this.$route.fullPath;
+      })
+      if (this.$vnode && !result) {
+        if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
+          if (this.$vnode.componentOptions) {
+            var key = this.$vnode.key == null
+              ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
+              : this.$vnode.key;
+            var cache = this.$vnode.parent.componentInstance.cache;
+            var keys = this.$vnode.parent.componentInstance.keys;
+            if (cache[key]) {
+              if (keys.length) {
+                var index = keys.indexOf(key);
+                if (index > -1) {
+                  keys.splice(index, 1);
+                }
+              }
+              delete cache[key];
+            }
+          }
+        }
+      }
+    }
+
+    next();
+  },
+});

src/lang/en.js

@@ -59,6 +59,7 @@ export default {
     logs: 'logs',
     table: 'table',
     form: 'form',
+    top: 'backtop',
     data: 'data',
     error: 'error',
     test: 'test'

src/lang/zh.js

@@ -58,6 +58,7 @@ export default {
     logs: '日志监控',
     table: '表格',
     form: '表单',
+    top: '返回顶部',
     data: '数据展示',
     permission: '权限',
     error: '异常页面',

src/main.js

@@ -5,6 +5,7 @@ import App from './App';
 import router from './router/router';
 import './permission'; // 权限
 import './error'; // 日志
+import './cache';//页面缓存
 import store from './store';
 import {loadStyle} from './util/util'
 import * as urls from '@/config/env';

src/page/index/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="avue-contail"
+  <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
-       :class="{'avue--collapse':isCollapse}">
     <div class="avue-header">
       <!-- 顶部导航栏 -->
       <top/>
     </div>
-
     <div class="avue-layout">
       <div class="avue-left">
         <!-- 左侧导航栏 -->
@@ -15,25 +13,15 @@
         <!-- 顶部标签卡 -->
         <tags/>
         <!-- 主体视图层 -->
-        <el-scrollbar style="height:100%">
+        <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view">
           <keep-alive>
-            <router-view class="avue-view"
+            <router-view class="avue-view" v-if="$route.meta.$keepAlive"/>
-                         v-if="$route.meta.keepAlive" />
           </keep-alive>
-          <router-view class="avue-view"
+          <router-view class="avue-view" v-if="!$route.meta.$keepAlive"/>
-                       v-if="!$route.meta.keepAlive" />
+        </div>
-        </el-scrollbar>
-
       </div>
     </div>
-    <!-- <el-footer class="avue-footer">
+    <div class="avue-shade" @click="showCollapse"></div>
-      <img src="/svg/logo.svg"
-           alt=""
-           class="logo">
-      <p class="copyright">© 2018 Avue designed by smallwei</p>
-    </el-footer> -->
-    <div class="avue-shade"
-         @click="showCollapse"></div>
   </div>
 </template>
 
@@ -46,6 +34,7 @@ import admin from "@/util/admin";
   import {validatenull} from "@/util/validate";
   import {calcDate} from "@/util/date.js";
   import {getStore} from "@/util/store.js";
+
   export default {
     components: {
       top,
@@ -82,7 +71,8 @@ export default {
             this.$store.commit("SET_SCREEN", admin.getScreen());
           }, 0);
         };
-      this.$store.dispatch("FlowRoutes").then(() => {});
+        this.$store.dispatch("FlowRoutes").then(() => {
+        });
       },
       refreshToken() {
         this.refreshTime = setInterval(() => {

src/page/index/layout.vue

@@ -1,3 +1,10 @@
 <template>
-  <router-view></router-view>
+  <div>
+    <keep-alive>
+      <router-view class="avue-view"
+                   v-if="$route.meta.$keepAlive" />
+    </keep-alive>
+    <router-view class="avue-view"
+                 v-if="!$route.meta.$keepAlive" />
+  </div>
 </template>

src/permission.js

@@ -11,19 +11,6 @@ import 'nprogress/nprogress.css' // progress bar style
 NProgress.configure({showSpinner: false});
 const lockPage = store.getters.website.lockPage; //锁屏页
 router.beforeEach((to, from, next) => {
-    //缓冲设置
-    if (to.meta.keepAlive === true && store.state.tags.tagList.some(ele => {
-        return ele.value === to.fullPath;
-    })) {
-        to.meta.$keepAlive = true;
-    } else {
-        NProgress.start()
-        if (to.meta.keepAlive === true && validatenull(to.meta.$keepAlive)) {
-            to.meta.$keepAlive = true;
-        } else {
-            to.meta.$keepAlive = false;
-        }
-    }
   const meta = to.meta || {};
   if (getToken()) {
     if (store.getters.isLock && to.path != lockPage) { //如果系统激活锁屏，全部跳转到锁屏页

src/router/avue-router.js

@@ -1,4 +1,3 @@
-
 let RouterPlugin = function () {
   this.$router = null;
   this.$store = null;
@@ -8,9 +7,11 @@ RouterPlugin.install = function (vue, router, store, i18n) {
   this.$router = router;
   this.$store = store;
   this.$vue = new vue({i18n});
+
   function isURL(s) {
     return /^http[s]?:\/\/.*/.test(s)
   }
+
   function objToform(obj) {
     let result = [];
     Object.keys(obj).forEach(ele => {
@@ -18,6 +19,7 @@ RouterPlugin.install = function (vue, router, store, i18n) {
     })
     return result.join('&');
   }
+
   this.$router.$avueRouter = {
     //全局配置
     $website: this.$store.getters.website,
@@ -94,7 +96,7 @@ RouterPlugin.install = function (vue, router, store, i18n) {
       for (let i = 0; i < aMenu.length; i++) {
         const oMenu = aMenu[i];
         if (this.routerList.includes(oMenu[propsDefault.path])) return;
-                const path = (() => {
+        let path = (() => {
             if (first) {
               return oMenu[propsDefault.path].replace('/index', '')
             } else {
@@ -108,6 +110,14 @@ RouterPlugin.install = function (vue, router, store, i18n) {
           children = oMenu[propsDefault.children],
           meta = oMenu[propsDefault.meta] || {};
 
+        meta = Object.assign(meta, (function () {
+          if (meta.keepAlive === true) {
+            return {
+              $keepAlive: true
+            }
+          }
+        })());
+
         const isChild = children.length !== 0;
         const oRouter = {
           path: path,
@@ -137,7 +147,9 @@ RouterPlugin.install = function (vue, router, store, i18n) {
             if (first) {
               if (!isURL(path)) oMenu[propsDefault.path] = `${path}/index`;
               return [{
-                                component(resolve) { require([`../${component}.vue`], resolve) },
+                component(resolve) {
+                  require([`../${component}.vue`], resolve)
+                },
                 icon: icon,
                 name: name,
                 meta: meta,

src/router/router.js

@@ -15,16 +15,23 @@ import i18n from '@/lang' // Internationalization
 import Store from '../store/';
 let Router = new VueRouter({
   scrollBehavior(to, from, savedPosition) {
+    const avueView = document.getElementById('avue-view');
+    if (!avueView) {
+      return {
+        x: 0,
+        y: 0
+      }
+    }
     if (savedPosition) {
       return savedPosition
     } else {
       if (from.meta.keepAlive) {
-                from.meta.savedPosition = document.body.scrollTop;
+        from.meta.savedPosition = avueView.scrollTop
-            }
+      } else {
-            return {
+        from.meta.savedPosition = 0;
-                x: 0,
-                y: to.meta.savedPosition || 0
       }
+      avueView.scrollTop = to.meta.savedPosition
+
     }
   },
   routes: []

src/util/util.js

@@ -26,6 +26,9 @@ export const getObjType = obj => {
     }
     return map[toString.call(obj)];
 };
+export const getViewDom = () => {
+  return window.document.getElementById('avue-view').getElementsByClassName('el-scrollbar__wrap')[0]
+}
 /**
  * 对象深拷贝
  */

src/views/util/affix.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="affix">
+    <avue-affix id="avue-view">
+      <span class="affix-affix">固定在最顶部</span>
+    </avue-affix>
+    <div class="affix-line"></div>
+    <avue-affix id="avue-view"
+                :offset-top="50">
+      <span class="affix-affix">固定在距离顶部 50px 的位置</span>
+    </avue-affix>
+    <div class="affix-line"></div>
+    <avue-affix id="avue-view"
+                :offset-top="100">
+      <span class="affix-affix">固定在距离顶部 100px 的位置</span>
+    </avue-affix>
+    <div class="affix-line"></div>
+    <avue-affix id="avue-view"
+                :offset-top="150">
+      <span class="affix-affix">固定在距离顶部 150px 的位置</span>
+    </avue-affix>
+    <div style="height:2000px;">
+      <div style="padding:15px 20px;font-size:18px;">往下拉就会出现图钉</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.affix {
+  position: relative;
+  background-color: #fff;
+  &-affix {
+    display: inline-block;
+    color: #fff;
+    padding: 10px 30px;
+    text-align: center;
+    background: rgba(0, 153, 229, 0.9);
+  }
+  &-line {
+    height: 100px;
+  }
+}
+</style>

src/views/util/cache.vue

@@ -0,0 +1,22 @@
+<template>
+  <basic-container>
+    <h3>这个页面会被 keep-alive</h3>
+    <el-tag>在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</el-tag>
+    <br /> <br />
+    <el-tag>同时滚动下拉，返回时还会保持滚动条所在的位置</el-tag>
+    <br /> <br />
+    <el-input v-model="value" placeholder="input here"></el-input>
+
+    <div style="height:1000px;"></div>
+  </basic-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ""
+    };
+  }
+};
+</script>

src/views/util/crud-form.vue

@@ -0,0 +1,59 @@
+<template>
+  <basic-container>
+    <h3>点击新增或编辑跳转到新的页面</h3>
+    <avue-crud :option="option"
+               :data="data">
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   size="small"
+                   @click="handleForm()"
+                   icon="el-icon-plus">add</el-button>
+      </template>
+      <template slot="menu"
+                slot-scope="{row}">
+        <el-button size="small"
+                   type="text"
+                   @click="handleForm(row.id)"
+                   icon="el-icon-edit">edit</el-button>
+      </template>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: {
+        addBtn: false,
+        editBtn: false,
+        column: [
+          {
+            label: "姓名",
+            prop: "name"
+          }
+        ]
+      },
+      data: [
+        {
+          id: 1,
+          name: "small"
+        }
+      ]
+    };
+  },
+  methods: {
+    handleForm(id) {
+      this.$router.push({
+        path: "/form-detail/index",
+        query: {
+          id: id
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/views/util/form-detail.vue

@@ -0,0 +1,40 @@
+<template>
+  <basic-container>
+    <h3>{{$route.query.id?'编辑':'新增'}}</h3>
+    <avue-form :option="option"
+               v-model="form">
+      <template slot="menuForm">
+        <el-button icon="el-icon-back"
+                   @click="handleBack()">返 回</el-button>
+      </template>
+    </avue-form>
+  </basic-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      option: {
+        labelWidth: 110,
+        column: [
+          {
+            label: "姓名",
+            prop: "name"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    handleBack() {
+      this.$router.$avueRouter.closeTag();
+      this.$router.back();
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/views/util/top.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div style="height:2000px;background-color:#fff;">
+      <div style="padding:15px 20px;font-size:18px;">往下拉就会出现返回菜单</div>
+    </div>
+    <avue-back-top id="avue-view"></avue-back-top>
+    <avue-back-top id="avue-view"
+                   :height="100"
+                   :bottom="200">
+      <div class="top">返回顶端</div>
+    </avue-back-top>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.top {
+  padding: 10px;
+  font-size: 14px;
+  background: rgba(0, 153, 229, 0.7);
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+}
+</style>