Elementui 导航组件和Vuejs路由结合

Posted 2020-12-30 木木

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>