Session在Vue导航菜单中的应用实例

Ant Design of Vue 中导航菜单应用Session

达到的效果，初始全部菜单关闭，点击标题打开对应的子菜单，再点击标题关闭对应的子菜单，如果不点击标题，则保持当前状态。

如下图：

 

代码：

<template>
    <a-menu
        mode="inline"
        :openKeys="openKeys"
        :style="{ height: '100%', borderRight: 0 }"
        @openChange="onOpenChange"
        @click="menuClick"
        :defaultSelectedKeys="[$route.path]"
        :inlineIndent="inlineIndent"
        v-model="navitem"
    >
    <template v-for="item in navdata">
      <a-sub-menu :key="item.key" v-if="item.children">
        <template v-if="item">
           <span slot="title">{{item.title}}</span>
           <a-menu-item v-for="childrenitem in item.children" :key="childrenitem.key">
           <span class="iconfont navicon" :class="childrenitem.icon"></span>{{childrenitem.title}}
          </a-menu-item>
        </template>
      </a-sub-menu>
      <a-menu-item :key='item.key' v-else>
        {{item.title}}
      </a-menu-item>
    </template>

    </a-menu>
</template>
<script>
export default {
  data () {
    return {
      inlineIndent: 20,
      rootSubmenuKeys: ['/index'],
      openKeys: [],
      navitem: [],
      navdata: [
        {
          key: '/index',
          title: '概况',
          path: '/index'
        },
        {
          key: '账号管理',
          title: '账号管理',
          children: [
            {
              icon: 'icon-068zhanghuanquan',
              key: '/security',
              title: '账户安全',
              path: '/security'
            },
            {
              icon: 'icon-shimingrenzheng',
              key: '/reallyName',
              title: '实名认证',
              path: '/reallyName'
            },
            {
              icon: 'icon-shimingzhifenxi',
              key: '/contact',
              title: '联系人',
              path: '/contact'
            },
            {
              icon: 'icon-dingyue',
              key: '/subscribe',
              title: '消息订阅',
              path: '/subscribe'
            }
          ]
        },
        {
          key: '财务中心',
          title: '财务中心',
          children: [
            {
              icon: 'icon-zhanghuchongzhi-copy',
              key: '/payment',
              title: '收支明细',
              path: '/payment'
            },
            {
              icon: 'icon-zhanghuchongzhi-copy',
              key: '/recharge',
              title: '充值',
              path: '/recharge'
            },
            {
              icon: 'icon-tixian',
              key: '/withdrawal',
              title: '提现',
              path: '/withdrawal'
            },
            {
              icon: 'icon-fapiao1',
              key: '/invoice',
              title: '发票',
              path: '/invoice'
            },
            {
              icon: 'icon-jiaoyizhangdan',
              key: '/bills',
              title: '交易账单',
              path: '/bills'
            }
          ]
        },
        {
          key: '工单管理',
          title: '工单管理',
          children: [
            {
              icon: 'icon-baoyanggongdan',
              key: '/repairOrder',
              title: '工单列表',
              path: '/repairOrder'
            }
          ]
        },
        {
          key: '订单管理',
          title: '订单管理',
          children: [
            {
              icon: 'icon-dingdan1',
              key: '/ordinaryOrder',
              title: '订单列表',
              path: '/ordinaryOrder'
            },
            {
              icon: 'icon-dingdan1',
              key: '/renewal',
              title: '产品续费',
              path: '/renewal'
            }
          ]
        },
        {
          key: '消息中心',
          title: '消息中心',
          children: [
            {
              icon: 'icon-xiaoxi',
              key: '/message',
              title: '消息',
              path: '/message'
            }
          ]
        }
      ],
      ceshi: ''
    }
  },
  created () {
    // 将从缓存中取出openKeys
    const openKeys = window.sessionStorage.getItem('openKeys')
    if (openKeys) {
      // 存在即赋值
      this.openKeys = JSON.parse(openKeys)
    }
  },
  mounted () {
    this.getPath()
  },
  methods: {
    menuClick ({ item, key, keyPath }) {
      // 获取到当前的key,并且跳转
      this.$router.push({
        path: key
      })
    },
    getPath () {
      this.navitem[0] = this.$route.meta.key
      // 将从缓存中取出openKeys
      const openKeys = window.sessionStorage.getItem('openKeys')
      if (openKeys) {
      // 存在即赋值
        this.openKeys = JSON.parse(openKeys)
        if (!this.openKeys.includes(this.$route.meta.sub)) {
          this.openKeys.push(this.$route.meta.sub)
        }
      }
      window.sessionStorage.setItem('openKeys', JSON.stringify(this.openKeys))
    },
    onOpenChange (openKeys) {
      // 将当前打开的父级菜单存入缓存中
      window.sessionStorage.setItem('openKeys', JSON.stringify(openKeys))

      //  控制只打开一个
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      //  console.log(this.openKeys)
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    }
  },
  watch: {
    // 监听路由变化
    $route: 'getPath'
  }
}
</script>