调整 根据路由改变边侧栏

src/components/Sidebar/index.vue

@@ -4,16 +4,16 @@
     .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
       .logo
         img(':src'="logo")
-      .item('v-if'="menus.length",'v-for'="(data,itemIndex) in menus" ,':key'="data.item.id",'@click'='choseMenu(data,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
+      .item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(data,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
         sidebar-item&attributes({
-          ':icon':'data.item.ico',
-          ':link':'data.item.link',
-          ':type':'data.item.type',
-          ':id':'data.item.id',
-          ':name':'data.item.name',
-          ':pid':'data.item.pid',
-          ':grade':'data.item.grade',
-          ':sort':'data.item.sort'
+          ':icon':'item.ico',
+          ':link':'item.link',
+          ':type':'item.type',
+          ':id':'item.id',
+          ':name':'item.name',
+          ':pid':'item.pid',
+          ':grade':'item.grade',
+          ':sort':'item.sort'
         })
       transition(name="fade",mode="out-in",appear)
         .childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
@@ -40,6 +40,7 @@
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import { calcIndexPathByCurrentRouter } from '@/utils'
 import sidebarItem from '../sidebarItem'
 const CrossStorageClient = require('cross-storage').CrossStorageClient;
 const crmDomain = location.hostname
@@ -51,12 +52,10 @@ const logo = require('@/assets/images/sidebar/logo-blue.png')
 export default {
   data () {
     return {
-      currentIndexPath: [1,0],
       collapse: false,
       logo,
       // unfold: false, // 水平展开
       unfoldBtn: false, // 展开按钮
-      currentMenusIndex: 2
     }
   },
   filters: {
@@ -77,10 +76,13 @@ export default {
       project: 'getProjectInfo',
       sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
     }),
+    currentMenusIndex () {
+      return (this.selectIndexPath && this.selectIndexPath.length) ? this.selectIndexPath[0] : -1
+    },
     currentMenus: {
       get () {
         const currentIndex = this.currentMenusIndex
-        const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
+        const currentMenus = currentIndex === -1 ? this.handerNoSidebar() : this.getCurrentMenus(currentIndex)
         this.$nextTick(() => {
           if (this.currentMenus) {
             this.handleOpen()
@@ -88,6 +90,13 @@ export default {
         })
         return currentMenus
       }
+    },
+    calc () {
+      const hasMenus = this.menus && this.menus.length
+      if (hasMenus ) {
+        this.calcRouter(this.menus)
+      }
+      return hasMenus
     }
   },
   mounted () {
@@ -96,7 +105,18 @@ export default {
   methods: {
     handleOpen () {
       const menus = this.$refs.menu
-      menus.open(0)
+      const openIndex = (this.selectIndexPath.length === 3) ? this.selectIndexPath[1] : 0
+      menus.open(openIndex)
+    },
+    calcRouter (menus) {
+      debugger
+      const currentRoute = location.href
+      const indexPath = calcIndexPathByCurrentRouter(menus,currentRoute)
+      this.selectIndexPath = indexPath
+    },
+    // 隐藏边侧栏，边侧栏最小化
+    handerNoSidebar () {
+      this.setSidebarUnfold(false)
     },
     /**
      * 选择边测菜单主菜单
@@ -160,7 +180,7 @@ export default {
       })
     },
     getCurrentMenus (index) {
-      return this.menus[index].item
+      return this.menus[index]
     },
     ...mapActions(['setSidebarUnfold'])
   }

src/router/index.js

@@ -29,6 +29,11 @@ export default new Router({
       path: '/login',
       name: 'Login',
       component: () => import(/* webpackChunkName: 'wxlogin' */ 'pages/login')
+    },
+    {
+      path: '/changelCenter/store/storeManage/storeOrgManage.do',
+      name: 'test',
+      component: () => import(/* web packChunkName: 'wxhome' */ 'pages/home'),
     }
   ]
 })

src/store/global/index.js

@@ -29,15 +29,7 @@ const actions = {
   }, parmas) {
     let res = await globalApi.getMenus(parmas)
     let menus = res.data.data
-    let menus2 = menus.map((item, index) => {
-      return {
-        index,
-        item: { ...item }
-      }
-    })
-
-    console.log(menus2)
-    commit(GET_MEUMS, menus2)
+    commit(GET_MEUMS, menus)
   },
   showEditMenus({ commit }) {
     commit(SHOW_EDIT_MENUS, true)

src/utils/index.js

@@ -17,3 +17,31 @@ export function getCookie(name) {
   }
   return ''
 }
+
+// 获取边侧栏路径indexPath与点击跳转链接link的mapping
+export function indexPathMapping(menus = [], mapping = {}, indexPath = []) {
+  menus.forEach((item, index) => {
+    let indexTemp = [...indexPath]
+    indexTemp.push(index)
+    if (item.children && indexPath <= 3) {
+      indexPathMapping(item.children, mapping, indexTemp)
+    }
+
+    if (item.link) {
+      let link = item.link
+      mapping[link] = indexTemp
+    }
+  })
+}
+
+export function calcIndexPathByRouter (mapping = {}, route = '') {
+  const key = Object.keys(mapping)
+    .filter((item) => route.indexOf(item))[0]
+  return mapping[key]
+}
+
+export function calcIndexPathByCurrentRouter (menus = [], currentRoute = '') {
+  let indexPathMappingWithLink = {}
+  indexPathMapping(menus, indexPathMappingWithLink)
+  return calcIndexPathByRouter(indexPathMappingWithLink, currentRoute)
+}