iview+侧边栏菜单+解决左侧菜单刷新有选中第一个的问题

前言：

        iview的左侧菜单，使用后发现有刷新选中效果就不对了，在这里是把他的name值设置跟路径一样来完美的解决这个问题的。

效果图：

下来是组件代码：LeftMenu.vue

<template>
  <Sider ref="leftMenu" class="slide">
    <Menu theme="dark" :active-name="activeName" :open-names="openName">
        <div v-for="(item,index) in toolMenu" :key="index">
          <Submenu v-if="item.children" :name="item.to">
            <template slot="title">
                {{item.name}}
            </template>
            <MenuItem :name="m.to" :to="m.to" v-for="(m,n) in item.children" :key="n">{{m.name}}</MenuItem>
          </Submenu>
          <MenuItem v-else :name="item.to" :to="item.to"> {{item.name}}</MenuItem>
        </div>
    </Menu>
  </Sider>
</template>

<script>
export default {
  data () {
    return {
      activeName:'',//当前选中
      openName:['BasicData'],//默认展开二级-基础数据
      // 工具导航
      toolMenu: [
        {
          name: '首页',
          to: '/index'
        },
        {
          name: '基础数据',
          to: 'BasicData',
          children:[
            {
              name: '单位管理',
              to: '/Company',
            },
             {
              name: '表具管理',
              to: '/Meter',
            },
             {
              name: '单价管理',
              to: '/Univalence',
            },
             {
              name: '统一调价',
              to: '/Unified',
            },
             {
              name: '集中器管理',
              to: '/Concentrator',
            },
             {
              name: '表具回收站',
              to: '/Recovery',
            },
          ]
        },
        {
          name: '业务管理',
          to: '/Business'
        },
        {
          name: '能源缴费',
          to: '/EnergyPayment'
        },
        {
          name: '报表管理',
          to: '/ReportManagement'
        },
        {
          name: '统计分析',
          to: '/StatisticalAnalysis'
        },
        {
          name: '告警管理',
          to: 'warning',
          children:[
            {
              name: '故障信息',
              to: '/fault',
            },
             {
              name: '断合闸信息',
              to: '/gate',
            }
          ]
        },
        {
          name: '通知公告',
          to: '/Notice'
        }
      ],
    }
  },
    mounted(){
      this.activeName = this.$route.path;//用name = path;
    },

}
</script>

<style lang="less" scoped>
*::-webkit-scrollbar {
  width: 0px;
}
.slide {
  min-height: calc(100vh - 50px);
  height: calc(100vh - 50px);
  overflow-y: auto;
  width:300px!important;
  min-width: 300px!important;
  max-width: 300px!important;
}
</style>