新增：根据当前路由自动展开菜单

chenghx

2018-08-02 f5b569f17022ed9940ee5e8df92d39995cd3b513

新增：根据当前路由自动展开菜单

 src/components/list/ApplicationList.vue

New file
@@ -0,0 +1,19 @@
<template>
  <div>
    <a-card style="" :bordered="false">
      bbb
    </a-card>
  </div>
</template>

<script>
import ACard from 'vue-antd-ui/es/card/Card'
export default {
  name: 'ApplicationList',
  components: {ACard}
}
</script>

<style scoped>

</style>

 src/components/list/ArticleList.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <a-card style="" :bordered="false">

      aaaa
    </a-card>
  </div>
</template>

 src/components/list/ProjectList.vue

New file
@@ -0,0 +1,19 @@
<template>
  <div>
    <a-card style="" :bordered="false">
      ccc
    </a-card>
  </div>
</template>

<script>
import ACard from 'vue-antd-ui/es/card/Card'
export default {
  name: 'ProjectList',
  components: {ACard}
}
</script>

<style scoped>

</style>

 src/components/list/SearchLayout.vue

@@ -5,7 +5,7 @@
          <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
        </div>
        <div style="padding: 0 24px">
          <a-tabs :tabBarStyle="{margin: 0}">
          <a-tabs :tabBarStyle="{margin: 0}" @change="navigate" :activeKey="activeKey">
            <a-tab-pane tab="文章" key="1"></a-tab-pane>
            <a-tab-pane tab="应用" key="2"></a-tab-pane>
            <a-tab-pane tab="项目" key="3"></a-tab-pane>
@@ -29,7 +29,46 @@

export default {
  name: 'SearchLayout',
  components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput}
  components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput},
  data () {
    return {
      activeKey: ''
    }
  },
  watch: {
    '$route': (val) => {
      switch (val.path) {
        case '/list/search/article':
          this.activeKey = '1'
          break
        case '/list/search/application':
          this.activeKey = '2'
          break
        case '/list/search/project':
          this.activeKey = '3'
          break
        default:
          this.activeKey = '1'
      }
    }
  },
  methods: {
    navigate (key) {
      switch (key) {
        case '1':
          this.$router.push('/list/search/article')
          break
        case '2':
          this.$router.push('/list/search/application')
          break
        case '3':
          this.$router.push('/list/search/project')
          break
        default:
          this.$router.push('/workplace')
      }
    }
  }
}
</script>


 src/components/menu/menu.js

@@ -53,8 +53,12 @@
    return {
      rootSubmenuKeys: ['/form', '/list', '/detail', '/exception', '/result'],
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: []
    }
  },
  created () {
    this.updateMenu()
  },
  watch: {
    collapsed (val) {
@@ -64,6 +68,9 @@
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    '$route': function () {
      this.updateMenu()
    }
  },
  methods: {
@@ -133,6 +140,15 @@
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    updateMenu () {
      let routes = this.$route.matched.concat()
      this.selectedKeys = [routes.pop().path]
      let openKeys = []
      routes.forEach((item) => {
        openKeys.push(item.path)
      })
      this.openKeys = openKeys
    }
  },
  render (h) {
@@ -143,10 +159,12 @@
          theme: this.$props.theme,
          mode: this.$props.mode,
          inlineCollapsed: false,
          openKeys: this.openKeys
          openKeys: this.openKeys,
          selectedKeys: this.selectedKeys
        },
        on: {
          openChange: this.onOpenChange
          openChange: this.onOpenChange,
          select: (obj) => { this.selectedKeys = obj.selectedKeys }
        }
      }, this.renderMenu(h, this.menuData)
    )

 src/router/index.js

@@ -17,6 +17,8 @@
import CardList from '@/components/list/CardList'
import SearchLayout from '@/components/list/SearchLayout'
import ArticleList from '@/components/list/ArticleList'
import ApplicationList from '@/components/list/ApplicationList'
import ProjectList from '@/components/list/ProjectList'
import WorkPlace from '@/components/dashboard/WorkPlace'

Vue.use(Router)
@@ -105,6 +107,18 @@
              name: '文章',
              component: ArticleList,
              icon: 'none'
            },
            {
              path: '/list/search/application',
              name: '应用',
              component: ApplicationList,
              icon: 'none'
            },
            {
              path: '/list/search/project',
              name: '项目',
              component: ProjectList,
              icon: 'none'
            }
          ]
        }