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>