刷新后路由菜单停留当前页面

README.md

@@ -45,16 +45,22 @@ npm run build
 
 ##  三、项目部署
 ### 3.1.1设置线上接口地址
+弃用：
 项目根目录下src/config/global.js下第12行，代码如下所示
 ```
 export const baseUrl = ''
 ```
+目前用：
+项目根目录下config/dev.env.js为本地环境
+项目根目录下config/prod.env.js为线上环境
 部署测试环境：把接口地址修改为 http://test.baoxianzhanggui.com:8080   
 部署正式环境：把接口地址修改为 http://www.baoxianzhanggui.com:8080
 
 ### 3.1.2 项目编译最小静态文件【生产模式】（Compiles and minifies for production）
 ```
 npm run build
+测试：npm run build--test 项目根目录下config/test.env.js
+正式：npm run build--prod 项目根目录下config/prod.env.js
 ```
 ### 3.1.3 压缩拷贝项目根目录下dist文件放到服务器项目目录解压
 测试服务器项目目录：C:\soft\apache-tomcat-8.0.50\nginx-1.17.7\html

src/components/MenuTree/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="'' + menu.id">
+  <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
     <template class="firstMenu" slot="title">
       <i :class="menu.icon" ></i>
       <span slot="title" class="firstMenu" >{{menu.name}}</span>
     </template>
     <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
   </el-submenu>
-  <el-menu-item v-else :index="'' + menu.id" @click="handleRoute(menu)">
+  <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
     <i :class="menu.icon"></i>
     <span slot="title">{{menu.name}}</span>
   </el-menu-item>
@@ -22,6 +22,8 @@ export default {
       required: true
     }
   },
+  created(){
+  },
   methods: {
     handleRoute (menu) {
       // 如果是嵌套页面，转换成iframe的path
@@ -41,10 +43,14 @@ export default {
   background-color: #393D49;
   color: #fff;
 }
-.el-submenu i,.el-submenu span, .el-menu-item i,.el-menu-item span{
-  color:#fff;
-}
-.el-menu-item.is-active{
-  background-color: #428BCA;
-}
+.el-menu-item.is-active {
+      background-color: #428BCA !important;
+    }
+// .el-submenu i,.el-submenu span, .el-menu-item i,.el-menu-item span{
+//   color:#fff;
+// }
+// :deep.el-menu-item.is-active{
+//   background-color: #428BCA !important;
+// }
+
 </style>

src/views/HeadBar/HeadBar.vue

@@ -13,7 +13,7 @@
       </span>
       <!-- 导航菜单 -->
       <span class="navbar" style="text-align: justify;">
-        <el-menu :default-active="activeIndex" class="el-menu-demo" style="overflow-x: hidden;border: none;"
+        <el-menu :default-active="menuIndex" class="el-menu-demo" style="overflow-x: hidden;border: none;"
           :background-color="themeColor" text-color="#fff" active-text-color="#ffd04b" mode="horizontal"
           @select="selectNavBar">
           <el-menu-item :index="item.id" v-for="item in leftNavItems" :key="item.id">{{ item.name }}</el-menu-item>
@@ -112,7 +112,7 @@ export default {
         return {}
       }
 
-    }
+    },
   },
   data() {
     return {
@@ -122,8 +122,8 @@ export default {
       userData: JSON.parse(localStorage.getItem('user_data'))  ,
       activeIndex: '86',
       langVisible: false,
-      avatar: require("@/assets/user.png")
-
+      avatar: require("@/assets/user.png"),
+      menuIndex: localStorage.getItem("routerId")
     }
   },
   created() {
@@ -132,6 +132,9 @@ export default {
              this.userData=response.data 
           })
     }
+    if(localStorage.getItem("routerId")){
+      this.$store.commit('changeLeftTree', localStorage.getItem("routerId"));
+    }
     if (this.leftNavItems.length > 8) {
       if (this.screenWidth < this.datawidth) {
         this.sum = Math.ceil((this.datawidth - this.screenWidth) / 70)
@@ -208,6 +211,8 @@ export default {
     selectNavBar(key, keyPath) {
       //切换左侧菜单
       this.$store.commit('changeLeftTree', key);
+      localStorage.setItem('routerId', key) // 保存用户到本地会话
+
     },
     // 折叠导航栏
     onCollapse: function () {

src/views/Login.vue

@@ -166,6 +166,7 @@ export default {
           this.$api.role.findAll().then((res) => {
             localStorage.setItem('find_all', JSON.stringify(res.data)) // 保存用户到本地会话
           })
+          localStorage.setItem('routerId', '420') // 保存用户到本地会话
           sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
           this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
           this.$router.push('/') // 登录成功，跳转到主页

src/views/NavBar/NavBar.vue

@@ -1,14 +1,35 @@
 <template>
   <div class="menu-bar-container">
     <!-- logo -->
-    <div class="logo" :style="{'background-color':themeColor}" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'" @click="$router.push('/')">
+    <div
+      class="logo"
+      :style="{'background-color':themeColor}"
+      :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
+      @click="$router.push('/')"
+    >
       <img v-if="collapse" src="@/assets/image/logo.png" />
-      <div v-if="!collapse">{{appName}} <img src="@/assets/image/logo.png" /></div>
+      <div v-if="!collapse">
+        {{appName}}
+        <img src="@/assets/image/logo.png" />
+      </div>
     </div>
     <!-- 导航菜单 -->
-    <el-menu ref="navmenu" default-active="" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'" :collapse="collapse" :collapse-transition="false" :unique-opened="true" background-color="#393D49" @open="handleopen" @close="handleclose" @select="handleselect">
+    <el-menu
+      ref="navmenu"
+      :default-active="$route.meta.index"
+      :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
+      :collapse="collapse"
+      :collapse-transition="false"
+      :unique-opened="true"
+      @open="handleopen"
+      @close="handleclose"
+      @select="handleselect"
+      background-color="#393D49"
+      text-color="#fff"
+      active-text-color="#fff"
+    >
       <!-- 导航菜单树组件，动态加载菜单 -->
-      <menu-tree v-for="item in leftTree" :key="item.id" :menu="item" ></menu-tree>
+      <menu-tree v-for="item in leftTree" :key="item.id" :menu="item"></menu-tree>
     </el-menu>
   </div>
 </template>
@@ -18,15 +39,15 @@ import { mapState } from "vuex";
 import MenuTree from "@/components/MenuTree";
 export default {
   components: {
-    MenuTree,
+    MenuTree
   },
   computed: {
     ...mapState({
-      appName: (state) => state.app.appName,
-      themeColor: (state) => state.app.themeColor,
-      collapse: (state) => state.app.collapse,
-      navTree: (state) => state.menu.navTree,
-      leftTree: (state) => state.menu.leftTree,
+      appName: state => state.app.appName,
+      themeColor: state => state.app.themeColor,
+      collapse: state => state.app.collapse,
+      navTree: state => state.menu.navTree,
+      leftTree: state => state.menu.leftTree
     }),
     mainTabs: {
       get() {
@@ -34,7 +55,7 @@ export default {
       },
       set(val) {
         this.$store.commit("updateMainTabs", val);
-      },
+      }
     },
     mainTabsActiveName: {
       get() {
@@ -42,31 +63,28 @@ export default {
       },
       set(val) {
         this.$store.commit("updateMainTabsActiveName", val);
-      },
-    },
+      }
+    }
   },
   watch: {
-    $route: "handleRoute",
+    $route: "handleRoute"
   },
   created() {
     this.handleRoute(this.$route);
   },
   methods: {
-    handleopen() {
-    },
-    handleclose() {
-    },
-    handleselect(a, b) {
-    },
+    handleopen() {},
+    handleclose() {},
+    handleselect(a, b) {},
     // 路由操作处理
     handleRoute(route) {
       // tab标签页选中, 如果不存在则先添加
-      var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
+      var tab = this.mainTabs.filter(item => item.name === route.name)[0];
       if (!tab) {
         tab = {
           name: route.name,
           title: route.name,
-          icon: route.meta.icon,
+          icon: route.meta.icon
         };
         this.mainTabs = this.mainTabs.concat(tab);
       }
@@ -76,8 +94,8 @@ export default {
         this.$refs.navmenu.activeIndex = "" + route.meta.index;
         this.$refs.navmenu.initOpenedMenu();
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -88,13 +106,12 @@ export default {
   left: 0;
   bottom: 0;
   z-index: 1020;
-
   .el-menu {
     position: absolute;
     top: 60px;
     bottom: 0px;
     text-align: left;
-   }
+  }
   
   .logo {
     position: absolute;