基于Vue生成动态路由树

叁歲伎倆 2022-12-06 05:24 221阅读 0赞

# 基于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][https_blog.csdn.net_weixin_42339552_article_details_108253829]

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

![Alt][]

[https_blog.csdn.net_weixin_42339552_article_details_108253829]: https://blog.csdn.net/weixin_42339552/article/details/108253829
[Alt]: /images/20221123/5403336c9aae4af8bc21e61ed0577d70.png