Elementui 导航组件和Vuejs路由结合

Elementui 导航组件和Vuejs路由结合， 达到点击导航切换路由，根据路由定位导航

一下是nav.vue代码，导航数据以json格式配置

<template>
 <el-menu  :default-active=\"$route.path\" 
      class=\"el-menu-vertical-demo\"
      router=true
      @open=\"handleOpen\"
      @close=\"handleClose\"
      background-color=\"#545c64\"
      text-color=\"#fff\" 
      active-text-color=\"#ffd04b\"
      v-bind:aa=\"$route.path\" >
      <template  v-for=\"item in menuDatas\">
          <el-submenu  v-if=\"item.children&&item.children.length>0\" v-bind:key=\"item.index\" v-bind:index=\"item.src\">
              <template slot=\"title\">
                <i class=\"el-icon-location\"></i>   
                <span  >{{ item.title }}</span>
              </template>
              <el-menu-item-group  v-if=\"item.children&&item.children.length>0\" > 
                <el-menu-item   v-for=\"item in item.children\"  v-bind:key=\"item.index\" v-bind:index=\"item.src\" > 
                  <span >{{ item.title }}</span>
                </el-menu-item> 
              </el-menu-item-group> 
          </el-submenu>
          <el-menu-item  v-else v-bind:key=\"item.index\" v-bind:index=\"item.src\">
            <i class=\"el-icon-menu\"></i>
            <span  >{{ item.title }}</span>
          </el-menu-item>
      </template>
     
 
  </el-menu>
 
</template>

<script>
export default {
  name: \"LeechgNav\",
  data: function() {
    var menuDatas = [
      {index:\"1\", type: \"href\", title: \"导航一\", icon: \"\", src: \"/1\", children: [
        {index:\"1-2\",  type: \"href\", title: \"选项一\", icon: \"\", src: \"/index\", children: [] },
        {index:\"1-3\",  type: \"href\", title: \"选项二\", icon: \"\", src: \"/lee\", children: [] },
        {index:\"1-4\",  type: \"href\", title: \"选项三\", icon: \"\", src: \"/lee2\", children: [] }
      ] },
      {index:\"2\",  type: \"href\", title: \"导航二\", icon: \"\", src: \"/2\", children: [] },
      {index:\"3\",  type: \"href\", title: \"导航三\", icon: \"\", src: \"/3\", children: [] },
      {index:\"4\",  type: \"href\", title: \"导航四\", icon: \"\", src: \"/4\", children: [] }
    ];
    return {
      greeting: \"Hello\",
      menuDatas
    };
  }
};
</script>
<style>
.leechg_index {
  background-color: red;
  color: white;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
a{
  color: white;
  text-decoration: none;
  color: inherit;
  text-decoration: inherit;
}
</style>