TBtools-个人中心左侧菜单栏切换优化

htmldev/TBTools/src/router/index.js

@@ -112,6 +112,8 @@ const mineRoutes = [
         meta: {
           title: '个人中心',
           isTab: true,
+          isUseCache: false,
+          keepAlive: true,
           isAuth: true
         }
       },
@@ -122,6 +124,8 @@ const mineRoutes = [
         meta: {
           title: '订单查询',
           isTab: true,
+          isUseCache: false,
+          keepAlive: true,
           isAuth: true
         }
       },
@@ -132,6 +136,8 @@ const mineRoutes = [
         meta: {
           title: '包裹查询',
           isTab: true,
+          isUseCache: false,
+          keepAlive: true,
           isAuth: true
         }
       },

htmldev/TBTools/src/views/modules/mine/main-sidebar.vue

@@ -2,38 +2,37 @@
   <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
     <div class="site-sidebar__inner">
       <el-menu
-        :default-active="menuActiveName || 'mine'"
-        :collapse="sidebarFold"
+        :default-active="$route.name"
         :collapseTransition="false"
         class="site-sidebar__menu">
         <el-menu-item index="mine" @click="$router.push({ path: '/mine' })">
           <icon-svg name="admin" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">个人中心</span>
         </el-menu-item>
-        <el-submenu index="order">
+        <el-submenu index="2">
           <template slot="title">
             <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
             <span>订单管理</span>
           </template>
-          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'orderCheckOrder' })">
+          <el-menu-item index="orderCheckOrder" @click="$router.push({ name: 'orderCheckOrder' })">
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">订单查询</span>
           </el-menu-item>
-          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'orderCheckPackage' })">
+          <el-menu-item index="orderCheckPackage" @click="$router.push({ name: 'orderCheckPackage' })">
             <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">包裹查询</span>
           </el-menu-item>
         </el-submenu>
-        <el-submenu index="pay">
+        <el-submenu index="3">
           <template slot="title">
             <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
             <span>我的钱包</span>
           </template>
-          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'payCheck' })">
+          <el-menu-item index="payCheck" @click="$router.push({ name: 'payCheck' })">
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">充值</span>
           </el-menu-item>
-          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'payWallet' })">
+          <el-menu-item index="payWallet" @click="$router.push({ name: 'payWallet' })">
             <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">明细</span>
           </el-menu-item>
@@ -44,8 +43,6 @@
 </template>
 
 <script>
-import { isURL } from '@/utils/validate'
-
 export default {
   data () {
     return {}
@@ -53,50 +50,6 @@ export default {
   computed: {
     sidebarLayoutSkin: {
       get () { return this.$store.state.common.sidebarLayoutSkin }
-    },
-    sidebarFold: {
-      get () { return this.$store.state.common.sidebarFold }
-    },
-    menuActiveName: {
-      get () { return this.$store.state.common.menuActiveName },
-      set (val) { this.$store.commit('common/updateMenuActiveName', val) }
-    },
-    mainTabs: {
-      get () { return this.$store.state.common.mainTabs },
-      set (val) { this.$store.commit('common/updateMainTabs', val) }
-    },
-    mainTabsActiveName: {
-      get () { return this.$store.state.common.mainTabsActiveName },
-      set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
-    }
-  },
-  watch: {
-    $route: 'routeHandle'
-  },
-  created () {
-    this.routeHandle(this.$route)
-  },
-  methods: {
-    // 路由操作
-    routeHandle (route) {
-      if (route.meta.isTab) {
-        // tab选中, 不存在先添加
-        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
-        if (!tab) {
-          tab = {
-            menuId: route.meta.menuId || route.name,
-            name: route.name,
-            title: route.meta.title,
-            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
-            iframeUrl: route.meta.iframeUrl || '',
-            params: route.params,
-            query: route.query
-          }
-          this.mainTabs = this.mainTabs.concat(tab)
-        }
-        this.menuActiveName = tab.menuId + ''
-        this.mainTabsActiveName = tab.name
-      }
     }
   }
 }