⚡ 优化底层驱动

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saber-admin",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/cache.js

@@ -1,12 +1,25 @@
 import Vue from 'vue'
 import store from './store';
 Vue.mixin({
+  beforeRouteEnter: function (to, from, next) {
+    next(() => {
+      let avueView = document.getElementById('avue-view');
+      if (avueView && to.meta.savedPosition) {
+        avueView.scrollTop = to.meta.savedPosition
+      }
+    })
+  },
   beforeRouteLeave: function (to, from, next) {
-    if (this.$route.meta.keepAlive === true) {
+    let avueView = document.getElementById('avue-view');
+    if (from && from.meta.keepAlive) {
+      if (avueView) {
+        from.meta.savedPosition = avueView.scrollTop
+      }
       const result = this.$route.meta.keepAlive === true && store.state.tags.tagList.some(ele => {
         return ele.value === this.$route.fullPath;
       });
       if (this.$vnode && !result) {
+        from.meta.savedPosition = 0
         if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
           if (this.$vnode.componentOptions) {
             let key = this.$vnode.key == null

src/page/index/index.vue

@@ -18,9 +18,9 @@
         <!-- 主体视图层 -->
         <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
           <keep-alive>
-            <router-view class="avue-view" v-if="$route.meta.$keepAlive"/>
+            <router-view class="avue-view" v-if="$route.meta.keepAlive"/>
           </keep-alive>
-          <router-view class="avue-view" v-if="!$route.meta.$keepAlive"/>
+          <router-view class="avue-view" v-if="!$route.meta.keepAlive"/>
         </div>
       </div>
     </div>

src/page/index/layout.vue

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

src/permission.js

@@ -30,7 +30,9 @@ router.beforeEach((to, from, next) => {
         const label = to.query.name || to.name;
         const meta = to.meta || router.$avueRouter.meta || {};
         const i18n = to.query.i18n;
-        if (meta.isTab !== false && !validatenull(value) && !validatenull(label)) {
+        if (to.query.target) {
+          window.open(value)
+        } else if (meta.isTab !== false && !validatenull(value) && !validatenull(label)) {
           store.commit('ADD_TAG', {
             label: label,
             value: value,

src/router/avue-router.js

@@ -3,10 +3,10 @@ let RouterPlugin = function () {
   this.$store = null;
 
 };
-RouterPlugin.install = function (vue, router, store, i18n) {
+RouterPlugin.install = function (vue, option = {}) {
-  this.$router = router;
+  this.$router = option.router;
-  this.$store = store;
+  this.$store = option.store;
-  this.$vue = new vue({i18n});
+  this.$vue = new vue({ i18n: option.i18n });
 
   // 这个的作用是 为了检查出网页链接，因为本项目用到了 iframe
   function isURL(s) {
@@ -129,9 +129,9 @@ RouterPlugin.install = function (vue, router, store, i18n) {
           meta = oMenu[propsDefault.meta] || {};
           // meta中 keepalive 的处理
         meta = Object.assign(meta, (function () {
-          if (meta.keepAlive === true) {
+          if (option.keepAlive === true) {
             return {
-              $keepAlive: true
+              keepAlive: true
             }
           }
         })());

src/router/router.js

@@ -16,33 +16,26 @@ import Store from '../store/'; // vuex
 Vue.use(VueRouter)
 //创建路由
 export const createRouter = () => new VueRouter({
-  // https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8
-  // 这个方法 是控制滚动条
-  // 如果 retuen falsy || {} ,则不发生滚动
-  scrollBehavior (to, from, savedPosition) {
-    // savedPosition 这个参数当且仅当导航 (通过浏览器的 前进/后退 按钮触发) 时才可用  效果和 router.go() 或 router.back()
-    if (savedPosition) {
-      // 返回savedPosition 其实就是 当用户点击 返回的话，保持之前游览的高度
-      return savedPosition
-    } else {
-      if (from.meta.keepAlive) {
-        from.meta.savedPosition = document.body.scrollTop
-      }
-      return {
-        x: 0,
-        y: to.meta.savedPosition || 0
-      }
-    }
-  },
   routes: [...PageRouter, ...ViewsRouter]
 })
 const Router = createRouter() // 获得 route 实例
-AvueRouter.install(Vue, Router, Store, i18n);  // 初始化和注册 AvueRouter
+// 初始化和注册 AvueRouter
+AvueRouter.install(Vue, {
+  router: Router,
+  store: Store,
+  i18n: i18n,
+  keepAlive: false,
+});
 Router.$avueRouter.formatRoutes(Store.state.user.menuAll, true); // 动态路由核心方法
 Router.addRoutes([...PageRouter, ...ViewsRouter]);
 export function resetRouter () {  // 重置路由 比如用于身份验证失败，需要重新登录时 先清空当前的路有权限
   const newRouter = createRouter()
   Router.matcher = newRouter.matcher // reset router
-  AvueRouter.install(Vue, Router, Store, i18n);
+  AvueRouter.install(Vue, {
+    router: Router,
+    store: Store,
+    i18n: i18n,
+    keepAlive: false,
+  });
 }
 export default Router

src/views/wel/index.vue

@@ -9,7 +9,7 @@
       <el-col :span="24">
         <basic-container>
           <p style="text-align: center">
-            <img src="https://img.shields.io/badge/Release-V2.7.0-green.svg" alt="Downloads"/>
+            <img src="https://img.shields.io/badge/Release-V2.7.1-green.svg" alt="Downloads"/>
             <img src="https://img.shields.io/badge/JDK-1.8+-green.svg" alt="Build Status"/>
             <img src="https://img.shields.io/badge/Spring%20Cloud-Hoxton.SR8-blue.svg" alt="Coverage Status"/>
             <img src="https://img.shields.io/badge/Spring%20Boot-2.2.11.RELEASE-blue.svg" alt="Downloads"/>

vue.config.js

@@ -17,6 +17,9 @@ module.exports = {
     entry.add('classlist-polyfill').end();
     entry.add('@/mock').end();
   },
+  css: {
+    extract: { ignoreOrder: true }
+  },
   //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
   devServer: {
     port: 1888,