基于Vue生成动态路由树

基于Vue生成动态路由树

创建MenuTree.vue文件

<template>
  <div>
    <template v-for="item in this.menuList">
      <el-submenu
        :index="item.menuId+''"
        v-if="item.type==true"
        :key="item.menuId+''"
        :disabled="!item.available"
      >
        <template slot="title" style="padding-left: 10px">
          <i :class="item.icon"></i>
          <span slot="title">{{item.menuName}}</span>
        </template>
        <MenuTree :menuList="item.childMenus"></MenuTree>
      </el-submenu>
      <el-menu-item
        v-else
        :disabled="!item.available"
        :index="item.url+''"
        :route="item.url"
        :key="item.menuId+''"
        style="padding-left: 50px;"
        @click="savePath(item.url)"
      >
        <i :class="item.icon"></i>
        <span>{{item.menuName}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

在home.vue中引入MenuTree组件

<!--  菜单    -->
      <el-aside :width="isCollapse?'64px':'200px'">
        <div class="toggle-btn" @click="toggleMenu">|||</div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="true"
          :default-active="activePath"
          background-color="#001529"
          :collapse-transition="false"
          text-color="rgba(255,255,255,0.7)"
          unique-opened
        >
          <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>
      </el-aside>
      
import MenuTree from "../components/MenuTree";
export default {
	  components: {
	    MenuTree,
	  },
  }
 async getMenuList() {
      //获取头信息
      let header = this.$store.state.userInfoVO.token;
      menus(header).then((res) => {
        if (res.code !== 200) {
          return this.$message.error("获取菜单信息失败：" + res.message);
        }
        this.menuList = res.data;
      });
    },

后端实现：https://blog.csdn.net/weixin_42339552/article/details/108253829

想要获取对应的资料，关注下方公众号留言即可。