<template>
  <div class="demo-menu-query">
    <ui-menu
      v-model="activeIndex"
      class="ui-menu-demo"
      query
      mode="horizontal">
      <ui-submenu index="1">
        <template slot="title">
          我的工作台
        </template>
        <ui-menu-item
          :route="{
            query: {
              index: '2-1'
            }
          }"
          index="2-1">
          选项1
        </ui-menu-item>
        <ui-menu-item index="2-2">
          选项2
        </ui-menu-item>
        <ui-menu-item index="2-3">
          选项3
        </ui-menu-item>
        <ui-submenu index="2-4">
          <template slot="title">
            选项4
          </template>
          <ui-menu-item index="2-4-1">
            选项1
          </ui-menu-item>
          <ui-menu-item index="2-4-2">
            选项2
          </ui-menu-item>
          <ui-menu-item index="2-4-3">
            选项3
          </ui-menu-item>
        </ui-submenu>
      </ui-submenu>
      <ui-menu-item index="3">
        <a
          href="https://www.xiaoman.cn"
          target="_blank">
          小满官网
        </a>
      </ui-menu-item>
      <ui-menu-item
        :route="{
          query: {
            index: '2'
          }
        }"
        index="3">
        消息中心
      </ui-menu-item>
      <ui-menu-item index="4">
        处理中心
      </ui-menu-item>
    </ui-menu>
  </div>
</template>
<script>
import { Menu, MenuItem, Submenu } from "amumu-ui"
export default {
  components: {
    "ui-menu": Menu,
    "ui-menu-item": MenuItem,
    "ui-submenu": Submenu,
  },
  data() {
    return {
      activeIndex: "1",
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>
