iview的menu使用

我使用iView的menu，可是當(dāng)我使用的時候，有2個問題：

1）默認(rèn)不會高亮我在代碼中的active-name="首頁導(dǎo)航"，這里是我鼠標(biāo)放上去才出現(xiàn)的結(jié)果：

2）我點擊任意一個子選項，全部都變?yōu)榱烁吡粒?/p>

我的數(shù)據(jù)：

const website_settings = {
  // 網(wǎng)站的設(shè)置的 menu 的數(shù)據(jù)
  website_settings_menu_data: [
    {
      "name":"網(wǎng)站首頁設(shè)置",
      "icon":"settings",
      "groups": [
        {
          "name": "網(wǎng)站首頁",
          "icon": "settings",
          "children": [
            {
              "name": "首頁導(dǎo)航",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "一級輪播",
              "route": "" // 輪播圖
            },
            {
              "name": "二級輪播",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "產(chǎn)品設(shè)置",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "公司展示",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "合作公司",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "首頁新聞",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "地圖導(dǎo)航",
              "route": "" // 跳轉(zhuǎn)路徑
            },
            {
              "name": "頁腳導(dǎo)航",
              "route": "" // 跳轉(zhuǎn)路徑
            }
          ]
        }
      ]
    },
    {
      "name":"網(wǎng)站新聞頁設(shè)置",
      "icon":"settings",
      "groups": [
        {
          "name": "網(wǎng)站新聞頁設(shè)置",
          "icon": "settings",
          "children": [
            {
              "name": "網(wǎng)站新聞頁設(shè)置",
              "route": "" // 跳轉(zhuǎn)路徑
            }

          ]
        }
      ]
    },
    {
      "name":"文檔設(shè)置",
      "icon":"settings",
      "groups": [
        {
          "name": "文檔設(shè)置",
          "icon": "settings",
          "children": [
            {
              "name": "文檔設(shè)置",
              "route": "" // 跳轉(zhuǎn)路徑
            }

          ]
        }
      ]
    },
    {
      "name":"關(guān)于我們設(shè)置",
      "icon":"settings",
      "groups": [
        {
          "name": "關(guān)于我們設(shè)置",
          "icon": "settings",
          "children": [
            {
              "name": "關(guān)于我們設(shè)置",
              "route": "" // 跳轉(zhuǎn)路徑
            }
          ]
        }
      ]
    },
    {
      "name":"實體服務(wù)器頁面設(shè)置",
      "icon":"settings",
      "groups": [
        {
          "name": "實體服務(wù)器頁面設(shè)置",
          "icon": "settings",
          "children": [
            {
              "name": "實體服務(wù)器頁面設(shè)置",
              "route": "" // 跳轉(zhuǎn)路徑
            }

          ]
        }
      ]
    },
    {
      "name":"通知公告設(shè)置",
      "icon":"settings",
      "groups": [
        {
          "name": "公告設(shè)置",
          "icon": "settings",
          "children": [
            {
              "name": "公告設(shè)置",
              "route": "" // 跳轉(zhuǎn)路徑
            }

          ]
        }
      ]
    }
  ]
}

export default website_settings;

我的組件代碼：

<template>
  <Menu mode="horizontal" theme="light" active-name="首頁導(dǎo)航">
    <Submenu v-for="(setting_item, i) in website_settings_config_data" :name="setting_item.name">
      <template slot="title">
        <Icon :type="setting_item.icon"></Icon>
        {{ setting_item.name }}
      </template>
      <MenuGroup v-for="(group, j) in setting_item.groups" :title="group.name">
        <MenuItem v-for="(child, k) in group.children" name="child.name">{{child.name}}</MenuItem>
      </MenuGroup>
    </Submenu>
  </Menu>
</template>

<script>

  import website_settings_config_data from './config-data/website-settings-config-data'

  export default{
    data(){
      return {
        website_settings_config_data: website_settings_config_data.website_settings_menu_data
      }
    },
    components: {},
    computed: {

    }
  }

</script>